js中去操作css样式以及css属性的替代方法
- 复杂形式的改变样式
- 使用类定义的方式+className的形式
- 使用setAttribute的形式加载
- 使用cssText的形式进行拼接
提示:
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
复杂形式的改变样式
什么叫最原始的方式去改变样式,就是通过对象对每个单独的属性去改变的这样的一种方式,这种方式有个及其恶略的缺点,就是代码量很大,因为每个属性都需要单独去设置。如下所示:
var p_1 = document.getElementById("p_1");
p_1.onmouseenter = function () {
p_1.style.color = "white";
p_1.style.backgroundColor = "deeppink";
p_1.style.fontSize = "18px";
}
p_1.onmouseleave = function () {
p_1.style.color = "black";
p_1.style.backgroundColor = "white";
p_1.style.fontSize = "16px";
}
它在样式的设置上面相对来说是比较复杂的。
使用类定义的方式+className的形式
什么叫做类定义,就是提前先去定义一个类名,然后通过动态改变类加载的形式,去改变其样式,它有两种形式,一种是拼接形式,另外一种就是覆盖形式:
首先先去定义一个样式:
.onenter{background: greenyellow;color: #3a8abf;font-size: 20px}
然后通过className去动态去修改:
p_2.onmouseenter = function () {
p_2. = "onenter";
}
p_2.onmouseleave = function () {
p_2.className = "";
}
拼接形式:
p_3.onmouseenter = function () {
var name = p_2.className;
name+=" ";
name+=" onenter"
p_3.setAttribute("class",name);
}
p_3.onmouseleave = function () {
p_3.setAttribute("class","fl_l");
}
注意拼接形式的话,在后续释放的时候,同样要将拼接的class类给去掉
使用setAttribute的形式加载
setAttrbute故名思议,也就是给添加一个特性特征,同样可以用来做css样式的动态切换,
如下所示,效果与上述className的形式是一样的:
p_3.onmouseenter = function () {
var name = p_2.className;
name+=" ";
name+=" onenter"
p_3.setAttribute("class",name);
}
p_3.onmouseleave = function () {
p_3.setAttribute("class","fl_l");
}
使用cssText的形式进行拼接
cssText在本质上面与className的形式是一致的,就是动态的去给其设置一个css的样式,但是这个样式并不会去改变其class的类型而已,它也是分成两种形态,一种是动态的去覆盖,一种是动态的去追加
对于样式来说,最简单的写法就是:
1.box.style.width = '150px';
2.box.style.height = '150px';
3.box.style.background = '#cc00ff';
但是对于上述的这种写法太冗余了,可以简化成,:
1.box.style.cssText = "width:150px; height:150px; background:#c0f;"
但是上面的写法是覆盖的写法,这种会把其原有的css样式给覆盖掉,所以更多的是采用追加形式。
1.oBox.style.cssText = oBox.style.cssText + 'width:150px; height:150px; background:#c0f;';
2:1.oBox.style.cssText += 'width:150px; height:150px; background:#c0f;';
追加的形式可能相对会更好一点,保留了原有的样式形式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.clearfix:after{
clear: both;
content: "";
display: block;
}
.fl_l{
float: left;
}
.main{width:1200px;box-shadow: 0 0 5px 0 deeppink;margin: 30px auto;}
p{width: 120px;height: 120px;box-shadow: 0 0 5px 0 blue;margin: 10px}
.onenter{background: greenyellow;color: #3a8abf;font-size: 20px}
.p_style{color: red;font-size: 22px}
</style>
</head>
<body>
<div class="main clearfix">
<p class="fl_l" id="p_1">最愚蠢的方式</p>
<p class="fl_l" id="p_2">定义+className</p>
<p class="fl_l" id="p_3">setAttrbutes</p>
<p class="fl_l p_style" id="p_4">cssText拼接</p>
</div>
<script>
var p_1 = document.getElementById("p_1");
var p_2 = document.getElementById("p_2");
var p_3 = document.getElementById("p_3");
var p_4 = document.getElementById("p_4");
p_1.onmouseenter = function () {
p_1.style.color = "white";
p_1.style.backgroundColor = "deeppink";
p_1.style.fontSize = "18px";
}
p_1.onmouseleave = function () {
p_1.style.color = "black";
p_1.style.backgroundColor = "white";
p_1.style.fontSize = "16px";
}
// p_2.onmouseenter = function () {
// p_2.className = "onenter";
// }
// p_2.onmouseleave = function () {
// p_2.className = "";
// }
p_2.onmouseenter = function () {
//拼接
var name = p_2.className;
name+=" ";
name+=" onenter"
p_2.className = name;
}
p_2.onmouseleave = function () {
p_2.className = "fl_l";
}
p_3.onmouseenter = function () {
var name = p_2.className;
name+=" ";
name+=" onenter"
p_3.setAttribute("class",name);
}
p_3.onmouseleave = function () {
p_3.setAttribute("class","fl_l");
}
p_4.onmouseenter = function () {
this.style.cssText +="color:white;background:deeppink;"
}
p_4.onmouseleave = function () {
this.style.cssText+="background:white;color:red;"
}
</script>
</body>
</html>
显示效果如下所示: