js给html添加style,js改变style样式和css样式的简单实例

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

Change.html

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

}

}

div1

test4(this)代表当前的

再来看一下改变css样式，代码如下：

Change1.html

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

}

}

div1

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