Question

我正在使用javascript创建动态div。在这里我想动态分配类名。喜欢以下条件。

将类设置为a
将类设置为b
将其设为班级c

我的代码如下。

＆＃13;

var elementRange = document.getElementById("div");
 var elementSpan = document.createElement("span");
 if (elementSpan.onmouseover) {
    elementSpan.className = "a";
 } else if (elementSpan.onclick) {
   elementSpan.className = "b";
 } else {
   elementSpan.className = "c";
}
elementRange.appendChild(elementSpan);

＆＃13;

<div id="div"></div>

＆＃13;

这里当我运行它时，鼠标悬停/点击不起作用，只有默认值为up。请让我知道我该怎么做。

另外，我使用的是唯一的javascript。

由于

Answer 1

您首先需要绑定EventListener，if else语句不能作为事件切换器对事件的工作方式如下：

    var elementRange = document.getElementById("div");
    var elementSpan = document.createElement("span");
    elementSpan.addEventListener("click", function(){
        elementSpan.className = "a";
    });
    elementSpan.addEventListener("mouseover", function(){
        elementSpan.className = "b";
    });
    elementSpan.addEventListener("mouseout", function(){
        elementSpan.className = "c";
    });
    elementSpan.innerHTML = "Lorem Ipsum"; //I added this line at least make span visible purpose
    elementRange.appendChild(elementSpan);

Answer 2

您可以使用Element.classList

中的一种方法

elementSpan.classList.add('a');
elementSpan.classList.remove('b');
elementSpan.classList.toggle('a');

更多https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

但是@Archer提到你可能会采用错误的方式

Answer 3

这里当我运行它时，鼠标悬停/点击不起作用，只有默认值为up。

因为您尚未注册任何活动。

您刚刚创建了一个元素并立即检查它们是否已注册任何事件。

这不是设置类名的方法。你必须听取这个事件并在回调中做一些事情。对于前

elementSpan.addEventListener("click", function(){
    elementSpan.className = "b";
});
elementSpan.addEventListener("mouseover", function(){
elementSpan.className = "a";
});

甚至可以使用CSS伪选择器来执行此操作。

Answer 4

这是我的解决方案：

elementSpan.innerHTML="Hello";
elementSpan.onmouseout=function()
                                        {
                        this.className="c";
                    }   
elementSpan.onmouseover=function()
                                        {
                      this.className="a";
                    }
elementSpan.onclick=function()
                                        {
                      this.className="b";
                    }

您可以参考here了解详情。

根据鼠标事件

4 个答案: