您的位置：首页 > Web前端 > CSS

从零开始前端学习[51]:js中去操作css样式以及css属性的替代方法

2017-11-12 18:46 871 查看

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>


显示效果如下所示:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript js改变css样式 cssText 属性拼接
相关文章推荐
新的分享
章节导航