JS 添加class|极客笔记

JS 添加class

在前端开发中，我们经常需要操作页面元素的样式，其中一种常见的操作是给元素添加一个class。通过添加class，我们可以通过CSS来控制页面元素的外观和行为。在本文中，我们将详细讨论如何使用JavaScript来添加class。

使用classList

在JavaScript中，有一个方便的方法来操作元素的class，即classList属性。classList属性返回一个元素的class列表，你可以通过调用它的方法来添加、移除、切换和检查class。

添加class

要给一个元素添加class，我们可以使用add方法。语法如下：

element.classList.add('classname');

其中element为要添加class的元素，classname为要添加的class名字。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>

    <p id="myPara">Hello, world!</p>

    <button onclick="addHighlight()">Add Highlight</button>

    <script>
        function addHighlight() {
            var para = document.getElementById('myPara');
            para.classList.add('highlight');
        }
    </script>

</body>
</html>

在这个示例中，当我们点击按钮时，addHighlight函数会给p标签添加名为highlight的class，从而改变其背景色为黄色。

运行结果

点击按钮后，p标签的背景色变为黄色，实现了添加class的效果。

使用className

除了classList外，我们也可以使用className属性来添加class。className属性返回元素的class属性值，我们可以直接修改它来添加class。

添加class

要添加class，我们只需要将要添加的class名字追加到className属性值上即可。

element.className += ' classname';

下面是一个示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .italic {
            font-style: italic;
        }
    </style>
</head>
<body>

    <p id="myPara">Hello, world!</p>

    <button onclick="addItalic()">Add Italic</button>

    <script>
        function addItalic() {
            var para = document.getElementById('myPara');
            para.className += ' italic';
        }
    </script>

</body>
</html>

在这个示例中，当我们点击按钮时，addItalic函数会给p标签添加名为italic的class，从而使文本变为斜体。