js改变style样式和css样式的简单实例

前端之家收集整理的这篇文章主要介绍了js改变style样式和css样式的简单实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

js可实现用户页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下:

Change.html <Meta http-equiv="content-type" content="text/html; charset=UTF-8">

<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";
}
}

test4(this)代表当前的

再来看一下改变css样式,代码如下:

Change1.html <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";
}

 }

以上就是小编为大家带来的js改变style样式和css样式的简单实例全部内容了,希望大家多多支持编程之家~

猜你在找的JavaScript相关文章