Question

我正在使用Javascript更改HTML元素。我更改了innerText并且试图更改类。 innerText发生了变化……但是类“ beautiful”不适用于ID为“ top”的元素。为什么不呢？

我检查了是否调用了该函数。显然是……因为innerText已更改。

function beautify(){	
   item = document.getElementById("top");
   item.classList.add = "beautiful";
   item.innerText = "Why does it not work ?";
   return;
}

.beautiful{
   color: blue;
   font-weight: bold;
   font-family: helvetica;
}

<h1 id="top">I'm going to change</h1>
<button onclick="beautify()"  >Click here for a special effect</button>

我希望按钮不仅可以更改innerText，而且还可以通过向ID为“ top”的元素添加类“ beautiful”来添加样式。

Answer 1

您快到了！ item.classlist.add不是获取/设置者，而是方法。因此，为了将一个类添加到元素中，您需要像这样调用它： item.classList.add('your-class-here');

Answer 2

您需要在add上调用方法classList：

function beautify(){	
   item = document.getElementById("top");
   item.classList.add("beautiful");
   item.innerText = "Now it works as expected!";
   return;
}

.beautiful{
   color: blue;
   font-weight: bold;
   font-family: helvetica;
}

<h1 id="top">I'm going to change</h1>
<button onclick="beautify()"  >Click here for a special effect</button>

Answer 3

<!DOCTYPE html>
<html>
    <head>
        <style>
            .beautiful{
                color: blue;
                font-weight: bold;
                font-family: helvetica;
            }
        </style>
        <script>
            function beautify(){    
                item = document.getElementById("top");
                item.className = "beautiful";
                item.innerText = "Why does it not work ?";
                return;
        }
        </script>
    </head> 
    <body>
        <h1 id="top">I'm going to change</h1>
        <button onclick="beautify()"  >Click here for a special effect</button>
    </body>
</html>

这应该有效。

Answer 4

您可以使用这种方式

item.classList.add("beautiful"); // correct way to add new class using javascript

代替

 item.classList.add = "beautiful";

为什么我的代码无法按预期方式工作？

4 个答案: