JavaScript修改css样式style动态改变元素样式

下面是关于JavaScript修改CSS样式的攻略：

下面是关于JavaScript修改CSS样式的攻略：

1. 通过修改style属性

最简单的修改元素样式的方式就是使用style属性。可以通过document对象获取元素，然后通过设置其style属性来改变样式：

// 获取元素
var element = document.getElementById('myElement');

// 修改元素样式
element.style.backgroundColor = 'red';
element.style.color = 'white';

在上面的示例中，我们首先获取了ID为'myElement'的元素，然后通过它的style属性来设置它的背景颜色和字体颜色。

需要注意的是，style属性只能获取和设置内联样式，也就是直接写在HTML标签中的样式。如果想要获取或设置外部CSS文件中定义的样式，需要使用下面介绍的方法。

2. 通过修改class属性

如果有多个元素需要设置相同的样式，可以使用CSS的class来实现复用。这时可以通过修改元素的class属性来改变样式：

// 获取元素
var element = document.getElementById('myElement');

// 修改元素class
element.className = 'myClass';

在上面的示例中，我们首先获取了ID为'myElement'的元素，然后把它的class修改为'myClass'，从而应用了'myClass'的样式。

示例1：改变按钮文字颜色

具体地，我们可以定义一个按钮，当用户鼠标悬停在按钮上时，把按钮文字的颜色改变为红色：

<button id="myButton" onmouseover="changeColor()">Click me!</button>

function changeColor() {
  var button = document.getElementById('myButton');
  button.style.color = 'red';
}

在上面的示例中，我们首先定义了一个ID为'myButton'的按钮，并添加了一个'onmouseover'事件监听，当鼠标悬停在按钮上时，调用了一个名为'changeColor'的函数。函数中获取到了该按钮的元素，并通过修改其style属性把文本颜色改为了红色。

示例2：在图片上添加阴影效果

我们也可以通过在代码中动态地为元素添加新的class，从而改变它们的样式。例如，我们可以定义一个按钮，用户点击它时在图片上添加阴影效果：

<button onclick="addShadow()">Add shadow</button>

<img id="myImage" src="https://picsum.photos/200" alt="">

.shadow {
  box-shadow: 10px 10px 5px grey;
}

function addShadow() {
  var image = document.getElementById('myImage');
  image.classList.add('shadow');
}

在上面的示例中，我们首先定义了一个ID为'myImage'的图片，并定义了一个名为'shadow'的CSS class，用于添加阴影效果。然后，我们定义了一个按钮，当用户点击它时，调用一个名为'addShadow'的函数。函数中获取到了图片元素，并通过调用它的classList.add()方法动态地添加'shadow'这个class，从而实现了在图片上添加阴影的效果。

以上就是关于JavaScript修改CSS样式的攻略，希望可以帮到您！