JS获取和修改元素样式的实例代码

当我们开发网页时，经常需要通过JavaScript获取元素样式，并修改元素的样式来实现各种交互效果。接下来，我将为您介绍获取和修改元素样式的实例代码。

获取元素样式

要获取元素的样式，我们可以使用getComputedStyle()函数。getComputedStyle()函数需要传递两个参数：要获取样式的元素和伪类（如果没有伪类则传递null）。这个函数返回一个对象，包含了元素的所有样式信息。

以下是一个获取元素样式的实例代码：

var element = document.getElementById("myElement");
var style = window.getComputedStyle(element, null);
var backgroundColor = style.getPropertyValue("background-color");

在这个代码块中，我们首先使用getElementById()函数获取一个ID为myElement的元素，然后使用getComputedStyle()函数获取这个元素的样式信息，并将这些信息存储在style变量中。最后，我们使用getPropertyValue()函数获取这个元素的background-color样式值，并将其存储在backgroundColor变量中。

修改元素样式

要修改元素的样式，我们可以使用style属性。style属性是一个对象，包含了所有的内联样式属性（即通过style属性定义的样式属性），我们可以通过修改这个对象来修改元素的样式。

以下是一个修改元素样式的实例代码：

var element = document.getElementById("myElement");
element.style.backgroundColor = "red";

在这个代码块中，我们首先使用getElementById()函数获取一个ID为myElement的元素，然后将这个元素的背景颜色修改为红色。

请注意，style属性只能修改内联样式。如果要修改外部样式（如CSS文件中定义的样式），我们需要使用classList属性或setAttribute()函数来操作元素的class属性或html元素属性。

以上就是获取和修改元素样式的实例代码。希望您能够理解并熟练运用这两种方法。