JS修改style中某个属性|极客笔记

JS修改style中某个属性

在开发网页时，经常会遇到需要动态修改元素样式的情况，这时就可以利用JavaScript来操作元素的style属性。本文将详细介绍如何使用JavaScript来修改元素的style中的某个属性。

获取元素

首先，我们需要获取需要修改样式的元素。可以通过document.getElementById、document.querySelector等方法来获取元素，然后操作它的style属性。

// 获取元素
var element = document.getElementById("elementId");

修改属性

接下来，我们可以直接通过元素的style属性来修改样式中的某个属性。例如，我们要修改元素的背景颜色：

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

示例代码

下面我们来看一个完整的示例代码，实现点击按钮时，动态修改一个元素的背景颜色：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS修改样式属性</title>
</head>
<body>
<div id="target" style="width: 200px; height: 200px; background-color: blue;"></div>
<button id="btn">修改背景颜色</button>

<script>
var element = document.getElementById("target");
var btn = document.getElementById("btn");

btn.addEventListener("click", function() {
   element.style.backgroundColor = "red";
});
</script>
</body>
</html>

点击按钮后，元素的背景颜色会变成红色。这就是使用JavaScript修改元素样式属性的基本操作。