JS设置style|极客笔记

JS设置style

在Web开发中，我们经常需要通过JavaScript来操作DOM元素的样式。通过设置元素的style属性，我们可以动态改变元素的样式，实现一些动态效果。本文将详细介绍如何使用JavaScript来设置元素的样式。

获取元素对象

在设置元素样式之前，我们首先需要获取到对应的元素对象。可以通过document.getElementById()、document.getElementsByClassName()、document.getElementsByTagName()等方法来获取元素。

// 通过id获取元素
var elementById = document.getElementById("elementId");

// 通过class获取元素
var elementsByClass = document.getElementsByClassName("className");

// 通过标签名获取元素
var elementsByTagName = document.getElementsByTagName("div");

设置元素样式

获取到元素对象之后，我们可以通过设置元素对象的style属性来改变元素的样式。可以直接设置style属性的各个样式属性，也可以通过element.style.cssText来设置多个样式属性。

// 直接设置样式属性
elementById.style.color = "red";
elementById.style.fontSize = "20px";

// 通过cssText设置多个样式属性
elementById.style.cssText = "color: blue; font-size: 16px;";

动态改变样式

除了一次性设置样式属性外，我们还可以通过事件监听器等方式动态改变元素的样式。下面是一个简单的示例：当鼠标移入元素时改变元素的背景颜色，移出时恢复原来的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Style</title>
<style>
#changeStyle {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}

</style>
</head>
<body>
<div id="changeStyle">Move mouse here</div>
<script>
var element = document.getElementById("changeStyle");

element.addEventListener("mouseenter", function() {
  element.style.backgroundColor = "lightgreen";
});

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

以上代码通过JavaScript实现了一个简单的鼠标移入移出改变元素背景颜色的效果。当鼠标移入时，元素的背景颜色变为lightgreen，移出时恢复为lightblue。