javascript добавить стиль удалить стиль

Question

У меня есть простой javascript, который добавляет стиль слайдеру, когда он поворачивается, чтобы показать, но я хочу удалить стиль, когда придет следующий слайдер, а также на мыши над удалением обоих стилей.

Это моя функция javascript, которая добавляет style = "width: 200px" к новому слайдеру и добавляет стиль = "width: 200px" в old.

function test(){ 
    var read = document.getElementById("slide-0") // how can i add here to read the incremented slide-0, slide-1, slide-2 
     .removeAttribute("style",0); 
} 

    function noEffect(pOld,pNew){ 

     if (pOld){ 
      pOld.style.width='10px'; 
     } 

     if (pNew){ 
      pNew.style.width='200px'; //this style become on active slider. 
     } 
    } 

Slider HTML

<div class="slider" onMouseOver="test()"> 
<ul> 
<li id="slide-0" class="slide" style="width: 10px"><img src="image.jpg"></li> 
<li id="slide-1" class="slide" style="width: 200px"><img src="image.jpg"></li> <!-- this is active now --> 
</ul> 
</div> 

Именно то, что я хочу, чтобы удалить стиль на обоих при наведении курсора мыши.

Любая помощь приветствуется.

Answer 1

Очень хорошее решение было бы использует классы. Вместо добавления стиля добавьте и удалите классы. Следующий код добавляет класс к компоненту, который будет создан.

var d = document.getElementById("div1"); 
d.className = d.className + " widthAlteration"; 

И в вашем CSS есть:

.widthAlteration 
{ 
    //width alteration 
} 

И если вы хотите вернуть эффект, просто сделать то же самое:

var d = document.getElementById("div1"); 
d.className = ""; 

Или для удобства есть интегрированные команды для что:

var ele = document.getElementById("div1"); 
addClass(ele, "widthAlteration"); 
// or 
removeClass(ele, "widthALteration"); 

Seein г, поскольку предыдущая часть не работала, я предложу jQuery

Внесите файл .js в свой проект и используйте jQuery. Это одна из наиболее часто используемых библиотек. Редко можно увидеть, что JS сделано в raw (возможно, если вам просто нужно выполнить простую операцию), но в общем случае jQuery - это путь.

После внедрения, добавьте в свой проект:

<script> 
$(document).ready(function() { 
//$("here goes the ID, class, component w.e. you desire") 
    $(".widthAlteration").click(function(){ 
     $(this).removeClass(".widthAlteration"); 
    }); 
}); 
</script> 

Answer 2

указать 0px

pOld.style.width='0px';