Question

我有一个简单的javascript，当转向显示时为滑块添加样式，但我想在下一个滑块到来时删除样式，并且在鼠标上移除这两种样式。

这是我的javascript函数，它将style =“width：200px”添加到新滑块并将style =“width：200px”添加到旧版本。

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

指定0px

pOld.style.width='0px';

Answer 2

一个非常好的解决方案是使用类。而不是添加样式，添加和删除类。以下代码将一个类添加到将要设置样式的组件中。

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");

如果上一部分无效，我会建议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>

javascript添加样式删除样式

2 个答案: