js 修改style属性|极客笔记

js 修改style属性

在网页开发中，经常需要通过JavaScript动态地修改页面元素的样式。通过修改元素的style属性，我们可以实现页面元素的动态样式变化。在本文中，我们将详细介绍如何使用JavaScript来修改元素的style属性。

获取元素对象

在修改元素的style属性之前，首先需要获取要修改的元素对象。通过JavaScript可以使用document.getElementById()或者document.querySelector()方法来获取元素对象。这里以document.getElementById()方法为例进行说明。

// 获取id为"demo"的元素对象
var element = document.getElementById("demo");

修改元素样式

获取元素对象后，即可通过修改其style属性来改变元素的样式。style属性是一个对象，包含了元素的全部样式属性。通过修改这些属性值，即可实现元素的样式改变。

例如，我们可以通过修改元素的背景颜色、字体大小等样式属性来改变元素的外观。

// 修改元素的背景颜色
element.style.backgroundColor = "red";

// 修改元素的字体大小
element.style.fontSize = "20px";

示例代码

下面是一个完整的示例代码，演示如何使用JavaScript来修改元素的背景颜色和字体大小。

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 修改元素样式</title>
    <script>
        window.onload = function() {
            // 获取id为"demo"的元素对象
            var element = document.getElementById("demo");

            // 修改元素的背景颜色
            element.style.backgroundColor = "red";

            // 修改元素的字体大小
            element.style.fontSize = "20px";
        }
    </script>
</head>
<body>
    <div id="demo">这是一个示例文本</div>
</body>
</html>

在上面的示例中，当页面加载完成后，JavaScript代码会获取id为”demo”的元素对象，并修改其背景颜色为红色，字体大小为20px。