js改变style样式和css样式的简单实例
js可实现⽤户对页⾯中的选择条件改变页⾯中的样式，页⾯样式可以通过style修饰，也可以通过css修饰，先来看⼀下js改变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 = ElementById('div1');
div1.style.backgroundColor="black";
}
if(event.value == "红⾊") {
//获取div1
js实现轮播图最简代码var div1 = ElementById('div1');
div1.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<div id="div1" >div1</div>
<input type="button" value="⿊⾊" onclick="test4(this)"/>
<input type="button" value="红⾊" onclick="test4(this)"/>
</body>
</html>
test4(this)代表当前的<input相当于把它看成⼀个对象。
再来看⼀下改变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>
以上就是⼩编为⼤家带来的js改变style样式和css样式的简单实例全部内容了，希望⼤家多多⽀持~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。