本文通过具体代码示例，详解如何使用JavaScript动态改变页面元素的样式。内容涵盖两种核心方法：一是通过DOM直接操作元素的style属性实现内联样式的即时修改；二是通过访问document.styleSheets对象，动态调整外部CSS文件中定义的类样式。文章提供了完整的HTML与JS代码结构，帮助开发者理解不同场景下的样式控制策略。
JavaScript动态修改元素样式：内联style与外部CSS的两种实现方式
JavaScript能够响应用户在页面上的交互选择，从而动态调整页面元素的视觉表现。这种样式的控制既可以通过直接操作元素的style属性来实现，也可以借助外部定义的CSS样式表来完成。首先，我们探讨如何通过JavaScript直接修改元素的内联style属性，具体实现代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Change.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script language="javascript">
function test4(event) {
if(event.value == "黑色") {
//获取div1
var div1 = document.getElementById('div1');
div1.style.backgroundColor="black";
}
if(event.value == "红色") {
//获取div1
var div1 = document.getElementById('div1');
div1.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<div id="div1" style="width:400px; height:300px; background-color:red;">div1</div>
<input type="button" value="黑色" onclick="test4(this)"/>
<input type="button" value="红色" onclick="test4(this)"/>
</body>
</html>
在代码中，test4(this)函数接收当前触发的<input>元素作为参数，将其视为一个对象进行处理。
接下来，介绍如何通过JavaScript修改外部CSS样式表中定义的类样式，相关代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Change1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/Change.css">
<script language="javascript">
function test4(event) {
//获取样式表中所有class选择器都获得
var ocssRules = document.styleSheets[0].rules;
//从ocssRules中取出你希望的class
var style1 = ocssRules[0];
if(event.value == "黑色") {
//window.alert(style1.style.backgroundColor);
style1.style.backgroundColor="black";
}else if(event.value == "红色") {
style1.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<div id="div1" class="style1">div1</div>
<input type="button" value="黑色" onclick="test4(this)"/>
<input type="button" value="红色" onclick="test4(this)"/>
</body>
</html>以上即为JavaScript动态修改内联style与外部CSS样式的完整实例解析，希望能为相关开发工作提供参考。