如何为div?添加一个类？
var new_row = document.createElement('div');
如何在 JavaScript 中向 DOM 元素添加类？
IT技术
javascript
dom
2021-01-16 12:31:03
6个回答
new_row.className = "aClassName";
这里有更多关于 MDN 的信息： className
使用.classList.add()方法：
const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);<div class="foo"></div>这种方法比覆盖该className属性要好，因为它不会删除其他类，并且如果元素已经具有该类，则不会添加该类。
您还可以使用切换或删除类element.classList（请参阅MDN 文档）。
这是使用函数方法的工作源代码。
<html>
<head>
<style>
.news{padding:10px; margin-top:2px;background-color:red;color:#fff;}
</style>
</head>
<body>
<div id="dd"></div>
<script>
(function(){
var countup = this;
var newNode = document.createElement('div');
newNode.className = 'textNode news content';
newNode.innerHTML = 'this created div contains a class while created!!!';
document.getElementById('dd').appendChild(newNode);
})();
</script>
</body>
</html>
有多种方法可以做到这一点。我将向您展示三种添加类的方法并阐明每种方法的一些好处。
您可以使用任何给定的方法向元素添加类，这是检查、更改或删除它们的另一种方法。
- 在类名的方式-简单的方法来添加单个或多个类别，并删除或更改所有类。
- 该class名册的方式-来操作类的方式; 同时添加、更改或删除单个或多个类。它们可以随时在您的代码中轻松更改。
- 该DOM方法-当根据DOM模型编写代码，这使类似的className方式更干净的代码和功能。
在类名的方式
这是一种简单的方法，将所有类存储在一个字符串中。该字符串可以轻松更改或附加。
// Create a div and add a class
var new_row = document.createElement("div");
new_row.className = "aClassName";
// Add another class. A space ' ' separates class names
new_row.className = "aClassName anotherClass";
// Another way of appending classes
new_row.className = new_row.className + " yetAClass";
如果一个元素只有一个 class，检查它很简单：
// Checking an element with a single class
new_row.className == "aClassName" ;
if ( new_row.className == "aClassName" )
// true
删除所有类或更改它们非常容易
// Changing all classes
new_row.className = "newClass";
// Removing all classes
new_row.className = "";
当使用多个类时，搜索或删除单个类是很困难的。您需要将className字符串拆分为一个数组，一一搜索它们，删除您需要的一个并将所有其他字符串添加回您的元素。该class名册的方式解决了这个问题，即使该类被设置使用的className方式。
该class列表方式
在需要时很容易操作类。您可以根据需要添加、删除或检查它们！它可以与单个或多个类一起使用。
// Create a div and add a class
var new_row = document.createElement("div");
new_row.classList.add( "aClassName" );
// Add another class
new_row.classList.add( "anotherClass" );
// Add multiple classes
new_row.classList.add( "yetAClass", "moreClasses", "anyClass" );
// Check for a class
if ( new_row.classList.contains( "anotherClass" ) )
// true
// Remove a class or multiple classes
new_row.classList.remove( "anyClass" );
new_row.classList.remove( "yetAClass", "moreClasses" );
// Replace a class
new_row.classList.replace( "anotherClass", "newClass" );
// Toggle a class - add it if it does not exist or remove it if it exists
new_row.classList.toggle( "visible" );
删除所有类或更改为单个类更容易通过className方式完成。
该DOM方法
如果您以DOM方式编写代码，这看起来更清晰，并通过设置 class 属性将类存储在字符串中。
// Create a div, add it to the documet and set class
var new_row = document.createElement( "div" );
document.body.appendChild( new_row );
new_row.setAttribute( "class", "aClassName anotherClass" );
// Add some text
new_row.appendChild( document.createTextNode( "Some text" ) );
// Remove all classes
new_row.removeAttribute( "class" );
检查一类很简单，当一个类被使用的
// Checking when a single class is used
if ( new_row.hasAttribute( "class" )
&& new_row.getAttribute( "class" ) == "anotherClass" )
// true
在使用多个类时检查或删除单个类使用与className方法相同的方法。但是classList方式更容易实现并且可以使用，即使您将其设置为DOM方式。
如果要创建很多元素，您可以创建自己的基本 createElementWithClass 函数。
function createElementWithClass(type, className) {
const element = document.createElement(type);
element.className = className
return element;
}
我知道的非常基本，但是能够调用以下内容就不那么混乱了。
const myDiv = createElementWithClass('div', 'some-class')
相对于很多
const element1 = document.createElement('div');
element.className = 'a-class-name'
一遍又一遍。