如何在 JavaScript 中向 DOM 元素添加类?
javascriptobject oriented programmingprogramming
HTML 是一种用于创建网页有用元素的标记语言。DOM 即文档对象模型，用于操作 HTML 文档。在 DOM 中，所有元素都定义为对象。可以使用 CSS 来设置 HTML 文档中的样式。在这里，JavaScript 被用来操作它们。
下面描述了将类添加到 DOM 元素的类中的方法。
使用 className
如果元素已经有一个类，那么它只会向其中添加另一个类，如果没有，元素将被附加到新类中。
语法
在 JavaScript 中添加类元素的语法如下 -
HTMLElemObj.className
示例 1
在此示例中，我们尝试在 JavaScript 中向 DOM 元素添加一个类 -
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Add an element to class </title> <style> .context{ padding: 40px; border: 2px solid #A47167; } .highlight{ background: lightblue; } </style> </head> <body> <div class="context" id="contextid"> <p>By using className property we can add a class to a given element</p> <button type="button" onclick="nClass();">Click here to add a new class </button> </div> <script> function nClass(){ var elem = document.getElementById("contextid"); elem.className += " highlight"; } </script> </body> </html>
使用 List 类
此方法有一个名为"add"的方法，用于向元素添加类名。
语法
类列表的语法如下 −
elem.classList.add("className")
示例 2
在此示例中，我们将学习如何使用 JavaScript 向 DOM 元素添加类 −
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Add a class to element</title> <style> .tutorix { background-color: orange; font-size: 35px; } </style> </head> <body> <button onclick="myClass()">Click</button> <div id="tp">Tutorilas Point</div> <script> function myClass() { var elem = document.getElementById("tp"); elem.classList.add("tutorix"); } </script> </body> </html>
执行上述代码后，会显示一个名为 click 的按钮，同时 Dom 元素会显示文本"Tutorialspoint"。
单击按钮后，会向元素添加一个新类，从而改变其样式。
