JS添加style|极客笔记

JS添加style

在前端开发中，我们经常需要通过JavaScript来动态修改页面的样式。这就涉及到了为元素添加CSS样式的操作。本文将详细介绍如何使用JavaScript往HTML元素中添加样式。

一、元素.style属性

在JavaScript中，每个元素都有一个style属性，这个属性是一个对象，用来设置元素的行内样式。可以通过这个属性来修改元素的样式。

<!DOCTYPE html>
<html lang="en">
<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>JS Add Style</title>
</head>
<body>
    <div id="myDiv">这是一个DIV</div>

    <script>
        var myDiv = document.getElementById("myDiv");
        myDiv.style.backgroundColor = "lightblue";
        myDiv.style.color = "white";
        myDiv.style.padding = "10px";
    </script>
</body>
</html>

在上面的示例中，我们通过JavaScript获取了id为myDiv的<div>元素，并通过style属性为其添加了背景色、字体颜色和内边距。

二、使用cssText属性

除了直接设置style属性的单个样式外，还可以使用cssText属性来设置多个样式。

<!DOCTYPE html>
<html lang="en">
<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>JS Add Style</title>
</head>
<body>
    <div id="myDiv">这是一个DIV</div>

    <script>
        var myDiv = document.getElementById("myDiv");
        myDiv.style.cssText = "background-color: lightblue; color: white; padding: 10px;";
    </script>
</body>
</html>

通过cssText属性，我们可以一次性设置多个样式，有时候会更加方便。

三、使用setAttribute方法

除了直接操作style属性外，还可以使用setAttribute方法来添加样式。这种方法更加灵活，可以添加任意CSS样式。

<!DOCTYPE html>
<html lang="en">
<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>JS Add Style</title>
</head>
<body>
    <div id="myDiv">这是一个DIV</div>

    <script>
        var myDiv = document.getElementById("myDiv");
        myDiv.setAttribute("style", "background-color: lightblue; color: white; padding: 10px;");
    </script>
</body>
</html>

使用setAttribute方法可以为元素添加任意CSS样式，只需要将CSS样式字符串作为参数传入。

四、动态修改样式

除了在初始化时添加样式，我们还可以在运行时动态修改元素的样式。

<!DOCTYPE html>
<html lang="en">
<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>JS Add Style</title>
</head>
<body>
    <div id="myDiv">这是一个DIV</div>
    <button onclick="changeStyle()">改变样式</button>

    <script>
        var myDiv = document.getElementById("myDiv");

        function changeStyle() {
            myDiv.style.backgroundColor = "lightgreen";
            myDiv.style.color = "black";
        }
    </script>
</body>
</html>

在上面的示例中，我们通过一个按钮的点击事件来动态修改myDiv元素的样式。这种方式可以实现一些交互效果。