JavaScript，如何给新建的元素添加css属性？
[英]JavaScript, how to add css attribute to a newly created element?
问题描述
I am trying to add my element to the unordered list.
我正在尝试将我的元素添加到无序列表中。 But during the creation of the element I also want to link this to an external css file which has the css property.但是在创建元素的过程中，我还想将其链接到具有 css 属性的外部 css 文件。 I have referred following Stack Overflow solutions: Add CSS attributes to element with JavaScript .我参考了以下 Stack Overflow 解决方案： Add CSS attributes to element with JavaScript 。
let a = document.getElementsByTagName('ul')[0]; let myelement = document.createElement('li'); // tried this first myelement.style.border = '2px solid red'; myelement.style.backgroundColor = 'rgb(255, 125, 115)'; let mytext = document.createTextNode('Green Onions'); // second method I tried to link with the external CSS file which I actually want myelement.setAttribute("class","myclass") // third method I tried to link with the external CSS file which I actually want let myattrib = document.createAttribute('class'); myattrib.value = "myclass" myelement.setAttributeNode(myattrib) a.appendChild(mytext)
.myclass { color: brown; text-emphasis-color:blue; }
<html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <h1 id="header">Last King</h1> <h2>Buy Groceries</h2> <ul> <li id="one" class="hot"><em>fresh</em>figs</li> <li id="two" class="hot">pine nuts</li> <li id="three" class="hot">honey</li> <li id="four">balsamic sugar</li> </ul> <script src="index.js"> </script> </body> </html>
None of these methods works in adding a new element with a CSS property, although with the first method I am able to just add the text node Green Onions .这些方法都无法添加具有 CSS 属性的新元素，尽管使用第一种方法我只能添加文本节点Green Onions 。 I am learning JS for the first time.我是第一次学习 JS。 Can someone provide me with information on what I am doing wrong?有人可以向我提供有关我做错了什么的信息吗？
2 个解决方案
解决方案1
2 已采纳 2022-05-28 07:02:08
You are not seeing anything happening because, that li you are creating, is not being added in the DOM.你没有看到任何事情发生，因为你正在创建的li没有被添加到 DOM 中。 Other than that all your attempts work.除此之外，您所有的尝试都有效。 I kept in the code below the simplest one.我在下面的代码中保留了最简单的代码。
let ul = document.querySelector("ul"); // line I changed let myelement = document.createElement("li"); let mytext = document.createTextNode("Green Onions"); myelement.appendChild(mytext); // line I added myelement.setAttribute("class", "myclass"); ul.appendChild(myelement); // line I added
.myclass { color: brown; text-emphasis-color: blue; }
<h1 id="header">Last King</h1> <h2>Buy Groceries</h2> <ul> <li id="one" class="hot"><em>fresh</em>figs</li> <li id="two" class="hot">pine nuts</li> <li id="three" class="hot">honey</li> <li id="four">balsamic sugar</li> </ul>
解决方案2
1 2022-05-28 07:05:28
There are two properties you could use, classList and className .您可以使用两个属性， classList和className 。 As I understand it, you want to achieve this:据我了解，您想实现这一目标：
<li style="border:...;background-color:..." class="myclass">
You already created your element and added the styles but now you don't know how to add the css class myclass , right?您已经创建了元素并添加了 styles 但现在您不知道如何添加 css class myclass ，对吗？
let myelement = document.createElement('li');
// method a
myelement.className = 'myclass';
// method b
myelement.classList.add('myclass');
I would always go for classList .我总是 go 为classList 。 With all its methods I find it much more elegant than className .我发现它的所有方法都比className优雅得多。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.