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

最新推荐文章于 2024-01-05 23:45:00 发布

^_^ 小小码nong

最新推荐文章于 2024-01-05 23:45:00 发布

阅读量627

点赞数 1

分类专栏： # 1.从零开始挑战前端文章标签： javascript js改变css样式 cssText 属性拼接

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78510344

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

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>

显示效果如下所示:

这里写图片描述

^_^ 小小码nong

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始前端学习[51]:js中去操作css样式以及css属性的替代方法

js中去操作css样式以及css属性的替代方法复杂形式的改变样式使用类定义的方式+className的形式使用setAttribute的形式加载使用cssText的形式进行拼接提示: 博主：章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041复杂形式的改变样式什么叫最原始的方式去改变样式，就是通过对象对每个单独的属性去改变的这
复制链接

扫一扫