本文详解JavaScript中动态修改元素样式的三种常用方式。首先介绍直接操作style属性的方法，适用于快速修改单个样式；其次讲解利用classList添加、移除或切换类名，通过CSS规则间接控制样式；最后演示通过CSSStyleDeclaration对象的setProperty方法设置带优先级的样式。
在JavaScript中，可通过多种手段动态调整元素样式，常见方式如下：
一、利用元素的style属性
此法最为直接，获取元素对象后，直接操作其style属性以设定样式。
示例1：调整单一元素样式
<!DOCTYPE html>
<html>
<head>
<title>JavaScript动态修改元素样式示例</title>
</head>
<body>
<p id="myParagraph">这是一个原始段落内容。</p>
<button onclick="changeStyle()">点击改变段落样式</button>
<script>
function changeStyle() {
// 获取id为myParagraph的元素对象
var paragraph = document.getElementById('myParagraph');
// 通过style属性修改段落的文字颜色和背景颜色
paragraph.style.color = 'blue';
paragraph.style.backgroundColor = 'lightyellow';
}
</script>
</body>
</html>
上述示例中：
- 首先通过
document.getElementById('myParagraph')获取id等于myParagraph的段落元素对象。 - 随后直接通过该元素对象的
style属性，运用paragraph.style.color = 'blue';将文字颜色设为蓝色，运用paragraph.style.backgroundColor = 'lightyellow';将背景色设为浅黄色。
二、利用classList属性
可通过操作元素的classList属性来增删或切换类名，进而间接修改样式，因类名通常关联CSS样式规则。
示例2：通过添加和移除类名改变样式
<!DOCTYPE html>
<html>
<head>
<title>JavaScript动态修改元素样式示例</title>
<style>
.highlight {
color: red;
background-color: lightgray;
}
.underline {
text-decoration: underline;
}
</style>
</head>
<body>
<p id="myParagraph">这是一个原始段落内容。</p>
<button onclick="addHighlight()">添加高亮样式</button>
<button onclick="removeHighlight()">移除高亮样式</button>
<button onclick="toggleUnderline()">切换下划线样式</button>
<script>
var paragraph = document.getElementById('myParagraph');
function addHighlight() {
// 为段落元素添加highlight类名，使其应用相关CSS样式
paragraph.classList.add('highlight');
}
function removeHighlight() {
// 从段落元素移除highlight类名，恢复原来样式
paragraph.classList.remove('highlight');
}
function toggleUnderline() {
// 切换段落元素的underline类名，实现下划线样式的切换
paragraph.classList.toggle('underline');
}
</script>
</body>
</html>
此示例中：
- 首先在HTML头部定义两个类名对应的CSS规则，
.highlight类设定文字颜色为红色、背景色为浅灰色，.underline类设定文本带下划线。 - 在JavaScript部分，通过
document.getElementById('myParagraph')获取段落元素对象，并存储于变量paragraph中。 - 点击
添加高亮样式按钮时，通过paragraph.classList.add('highlight')为段落元素添加highlight类名，使其应用相关CSS样式。 - 点击
移除高亮样式按钮时，通过paragraph.classList.remove('highlight')从段落元素移除highlight类名，恢复原样式。 - 点击
切换下划线样式按钮时，通过paragraph.classList.toggle('underline')切换段落元素的underline类名，实现下划线样式切换。
三、利用setProperty方法（通过CSSStyleDeclaration对象）
可获取元素的CSSStyleDeclaration对象，然后使用其setProperty方法来设置样式属性和值。
示例3：使用setProperty方法修改样式
<!DOCTYPE html>
<html>
<head>
<title>JavaScript动态修改元素样式示例</title>
</head>
<body>
<p id="myParagraph">这是一个原始段落内容。</p>
<button onclick="modifyStyle()">修改段落样式</button>
<script>
function modifyStyle() {
// 获取id为myParagraph的元素对象
var paragraph = document.getElementById('myParagraph');
// 获取元素的CSSStyleDeclaration对象
var styleDeclaration = paragraph.style;
// 使用setProperty方法设置样式属性和值
styleDeclaration.setProperty('color', 'green', 'important');
styleDeclaration.setProperty('font-size', '18px');
}
</script>
</body>
</html>
示例3中：
- 首先获取
id等于myParagraph的元素对象。 - 然后获取该元素的
CSSStyleDeclaration对象，通过var styleDeclaration = paragraph.style;实现。 - 最后使用
setProperty方法，如styleDeclaration.setProperty('color', 'green', 'important');将文字颜色设为绿色，并添加important标记以提高优先级，styleDeclaration.setProperty('font-size', '18px');将字体大小设为18px。
通过上述方法，可根据不同需求在JavaScript中灵活动态修改元素样式，实现各类网页交互效果。
总结
至此，关于如何通过JavaScript动态修改元素样式的文章介绍完毕，更多相关JS动态修改元素样式内容请搜索本站往期文章或继续浏览下方相关文章，希望大家今后多多支持本站！