前端技术分享-码匠 极客编程技术分享

您当前位于：DOM文档操作 ——> JavaScript 快速修改标签多种样式 - cssText
上一篇：getComputedStyle 获取渲染后样式的基本方法 下一篇：JavaScript 滚动类特效常用属性 - scrollLeft等

JavaScript 快速修改标签多种样式 - cssText

2015/11/07 18:41:06 | 作者：HTML5学堂（码匠） | 分类：DOM文档操作 | 关键词：JavaScript,修改样式,cssText,多种样式

cssText的基本使用

HTML5学堂：利用JavaScript给标签设置动态的样式，用到了大家比较熟悉的style来给标签设置样式，今天要给大家介绍另外一个cssText，它不仅用起来方便而且性能上比style更好，我们来赶紧来学习一下吧~

利用style给标签设置CSS属性

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5Course - 梦幻雪冰</title>
  6.     <link rel="stylesheet" href="reset.css">
  7. </head>
  8. <body>
  9.     <div class="wrap" id="test">HTML5学堂：刘国利、陈能堡</div>
  10.     <script>
  11.         var box = document.getElementById("test");
  12.  
  13.         box.style.width = "200px";
  14.         box.style.height = "200px";
  15.         box.style.backgroundColor = "skyblue";
  16.     </script>
  17. </body>
  18. </html>

这样感觉好麻烦啊，我们还是把它封装成一个函数更方便吧

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5Course - 梦幻雪冰</title>
  6.     <link rel="stylesheet" href="reset.css">
  7. </head>
  8. <body>
  9.     <div class="wrap" id="test">HTML5学堂：刘国利、陈能堡</div>
  10.     <script>
  11.         var box = document.getElementById("test");
  12.  
  13.         /*
  14.          * [setStyle 给标签动态设置样式的函数]
  15.          * @param {[对象]} obj [要设置样式的标签]
  16.          * @param {[对象]} css [要给标签设置样式属性对象]
  17.          * @author HTML5学堂 www.h5course.com | www.h5course.cn
  18.          */
  19.         function setStyle(obj, css) {
  20.             for (var pro in css) {
  21.                 // pro 遍历的是对象的属性
  22.                 obj.style[pro] = css[pro];
  23.             };
  24.         }
  25.         setStyle(box, {width: "200px", height: "200px", backgroundColor: "skyblue"});
  26.     </script>
  27. </body>
  28. </html>

欢迎沟通交流~HTML5学堂

意外发现了一个很好用的cssText属性

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5Course - 梦幻雪冰</title>
  6.     <link rel="stylesheet" href="reset.css">
  7. </head>
  8. <body>
  9.     <div class="wrap" id="test">HTML5学堂：刘国利、陈能堡</div>
  10.     <script>
  11.         var box = document.getElementById("test");
  12.  
  13.         box.style.cssText = "width: 200px;height: 200px;background-color: skyblue;";
  14.     </script>
  15. </body>
  16. </html>

注意：cssText很快捷且所有浏览器都支持。此外当批量操作样式时，cssText只需一次reflow，提高了页面渲染性能。

cssText也有不好的地方啊，真悲剧~

它会覆盖之前的样式

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5Course - 梦幻雪冰</title>
  6.     <link rel="stylesheet" href="reset.css">
  7. </head>
  8. <body>
  9.     <div class="wrap" id="test">HTML5学堂：刘国利、陈能堡</div>
  10.     <script>
  11.         var box = document.getElementById("test");
  12.         // 字体颜色被覆盖了
  13.         box.style.color = "pink";
  14.         box.style.cssText = "width: 200px;height: 200px;background-color: skyblue;";
  15.     </script>
  16. </body>
  17. </html>

注意：发现上面的文字颜色被后面的样式给覆盖了，真悲剧啊~，该咋办啊？

灵感一来，想到了解决的办法

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5Course - 梦幻雪冰</title>
  6.     <link rel="stylesheet" href="reset.css">
  7. </head>
  8. <body>
  9.     <!-- 标签样式文字颜色设置好了 -->
  10.     <div class="wrap" id="test" style="color:red">HTML5学堂：刘国利、陈能堡</div>
  11.     <script>
  12.         var box = document.getElementById("test");
  13.  
  14.         /*
  15.          * [setStyle 动态设置样式的函数]
  16.          * @param {[对象]} obj [需要设置样式的标签]
  17.          * @param {[字符串]} cssStr [设置样式的属性]
  18.          */
  19.         function setStyle(obj, cssStr) {
  20.             // 获取标签的样式对象
  21.             var oldStyle = obj.style;
  22.  
  23.             console.log(oldStyle.cssText);
  24.             // 之前的样式 + 现在的样式，就不会发生覆盖了
  25.             oldStyle.cssText = oldStyle.cssText + cssStr;
  26.         }
  27.         setStyle(box, "width: 200px;height: 200px;background-color: skyblue;");
  28.     </script>
  29. </body>
  30. </html>

在IE6、7、8下，整个人瞬间都不好了

正常下：

cssText的基本使用

不正常下：

cssText的基本使用

原因：正常情况下，标签内联样式是这样的style="color: red; width: 200px; height: 200px; background-color: skyblue;"，但是在IE6、7、8下cssText返回的属性全是大写，并且最后没有分号，导致标签的内联样式变成这样了style="COLOR: redWIDTH: 200px; HEIGHT: 200px; BACKGROUND-COLOR: skyblue;"，就无法正常渲染了

有问题赶紧解决哈，利用字符串的方法来处理吧

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5Course - 梦幻雪冰</title>
  6.     <link rel="stylesheet" href="reset.css">
  7. </head>
  8. <body>
  9.     <!-- 标签样式文字颜色设置好了 -->
  10.     <div class="wrap" id="test" style="color:red">HTML5学堂：刘国利、陈能堡</div>
  11.     <script>
  12.         var box = document.getElementById("test");
  13.  
  14.         /*
  15.          * [setStyle 动态设置样式的函数]
  16.          * @param {[对象]} obj [需要设置样式的标签]
  17.          * @param {[字符串]} cssStr [设置样式的属性]
  18.          */
  19.         function setStyle(obj, cssStr) {
  20.             // 获取标签的内联样式
  21.             var oldStyle = obj.style;
  22.             var cssText = oldStyle.cssText;
  23.  
  24.             // 判断返回的结果有没有分号
  25.             if (cssText.lastIndexOf(";") == -1) {
  26.                 // 返回结果转为小写并加上分号
  27.                 cssText = cssText.toLowerCase() + ";";
  28.             };
  29.  
  30.             // 之前的样式 + 现在的样式，就不会发生覆盖了
  31.             oldStyle.cssText = cssText + cssStr;
  32.         }
  33.         setStyle(box, "width: 200px;height: 200px;background-color: skyblue;");
  34.     </script>
  35. </body>
  36. </html>

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

上一篇：getComputedStyle 获取渲染后样式的基本方法 下一篇：JavaScript 滚动类特效常用属性 - scrollLeft等