Schimbare valoare class intre doua Div-uri

Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
patricia
Mesaje: 82

Schimbare valoare class intre doua Div-uri

Am incercat pentru doua div-uri cu doua clase "div1" si "div2" sa interschimb valoarea atributelor class prin " obiect.className="valoare" " dar nu functioneza. Trebuie sa folosesc alta functie?

Cod: Selectaţi tot

<html>
<head>
<title>
exercitiu
</title>
<style type="text/css">
.div1{
position:absolute;
top:50px;
left:40px;
width:300px;
height:100px;
border:2px solid blue;
background-color:red;
}
.div2{
position:absolute;
left:200px;
top:400px;
width:100px;
height:300px;
border:2px solid red;
background-color:blue;
}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
</div>
<form>
<input id="modifica" style="position:absolute;top:20px;left:20px;" value="interschimba" type="button">
</form>
<script type="text/javascript">
var aux=document.getElementById("modifica");
aux.onclick=function(){
elem=document.getElementsByTagName('div');
elem[0].className='div2';
elem[1].className='div1';
};
</script>
</body>
</html>
MarPlo Mesaje: 4343
Cu obiect.className se poate prelua si modifica valoarea atributului "class".
Problema in scriptul de mai sus e " position:absolute; " setat in CSS, ceea ce face ca respectiva clasa sa isi mentina pozitia, chiar daca acea clasa e transferata la alt Div, din cauza ca ramane in aceeasi pozitie, cu aceleasi proprietati, nu se observa schimbarea.
Ca sa observi modificarea, adauga un text diferit in ele, sau sterge " position:absolute; ", cum e in acest exemplu.

Cod: Selectaţi tot

<html>
<head>
<title>exercitiu</title>
<style type="text/css">
.div1{
top:50px;
left:40px;
width:300px;
height:100px;
border:2px solid blue;
background-color:red;
}
.div2{
left:200px;
top:400px;
width:100px;
height:300px;
border:2px solid red;
background-color:blue;
}
</style>
</head>
<body>
<div class="div1">012...</div>
<div class="div2">ABC XYZ</div>
<form>
<input id="modifica" value="interschimba" type="button" />
</form>
<script type="text/javascript">
document.getElementById('modifica').onclick=function(){
  var elem = document.getElementsByTagName('div');
  elem[0].className = 'div2';
  elem[1].className = 'div1';
};
</script>
</body>
</html>

Subiecte similare