下面是关于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样式的攻略,希望可以帮到您!
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript修改css样式style动态改变元素样式 - Python技术站