cssText的基本使用

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

利用style给标签设置CSS属性

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" href="reset.css">
</head>
<body>
    <div class="wrap" id="test">HTML5学堂:刘国利、陈能堡</div>
    <script>
        var box = document.getElementById("test");
 
        box.style.width = "200px";
        box.style.height = "200px";
        box.style.backgroundColor = "skyblue";
    </script>
</body>
</html>

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

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" href="reset.css">
</head>
<body>
    <div class="wrap" id="test">HTML5学堂:刘国利、陈能堡</div>
    <script>
        var box = document.getElementById("test");
 
        /*
         * [setStyle 给标签动态设置样式的函数]
         * @param {[对象]} obj [要设置样式的标签]
         * @param {[对象]} css [要给标签设置样式属性对象]
         * @author HTML5学堂 www.h5course.com | www.h5course.cn
         */
        function setStyle(obj, css) {
            for (var pro in css) {
                // pro 遍历的是对象的属性
                obj.style[pro] = css[pro];
            };
        }
        setStyle(box, {width: "200px", height: "200px", backgroundColor: "skyblue"});
    </script>
</body>
</html>

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

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" href="reset.css">
</head>
<body>
    <div class="wrap" id="test">HTML5学堂:刘国利、陈能堡</div>
    <script>
        var box = document.getElementById("test");
 
        box.style.cssText = "width: 200px;height: 200px;background-color: skyblue;";
    </script>
</body>
</html>

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

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

它会覆盖之前的样式

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

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

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

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" href="reset.css">
</head>
<body>
    <!-- 标签样式文字颜色设置好了 -->
    <div class="wrap" id="test" style="color:red">HTML5学堂:刘国利、陈能堡</div>
    <script>
        var box = document.getElementById("test");
 
        /*
         * [setStyle 动态设置样式的函数]
         * @param {[对象]} obj [需要设置样式的标签]
         * @param {[字符串]} cssStr [设置样式的属性]
         */
        function setStyle(obj, cssStr) {
            // 获取标签的样式对象
            var oldStyle = obj.style;
 
            console.log(oldStyle.cssText);
            // 之前的样式 + 现在的样式,就不会发生覆盖了
            oldStyle.cssText = oldStyle.cssText + cssStr;
        }
        setStyle(box, "width: 200px;height: 200px;background-color: skyblue;");
    </script>
</body>
</html>

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

正常下:

不正常下:

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

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

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5Course - 梦幻雪冰</title>
    <link rel="stylesheet" href="reset.css">
</head>
<body>
    <!-- 标签样式文字颜色设置好了 -->
    <div class="wrap" id="test" style="color:red">HTML5学堂:刘国利、陈能堡</div>
    <script>
        var box = document.getElementById("test");
 
        /*
         * [setStyle 动态设置样式的函数]
         * @param {[对象]} obj [需要设置样式的标签]
         * @param {[字符串]} cssStr [设置样式的属性]
         */
        function setStyle(obj, cssStr) {
            // 获取标签的内联样式
            var oldStyle = obj.style;
            var cssText = oldStyle.cssText;
 
            // 判断返回的结果有没有分号
            if (cssText.lastIndexOf(";") == -1) {
                // 返回结果转为小写并加上分号
                cssText = cssText.toLowerCase() + ";";
            };
 
            // 之前的样式 + 现在的样式,就不会发生覆盖了
            oldStyle.cssText = cssText + cssStr;
        }
        setStyle(box, "width: 200px;height: 200px;background-color: skyblue;");
    </script>
</body>
</html>

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-11-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

OS X开发:NSProgressIndicator进度指示器控件

    NSProgressIndicator是OS X平台上的活动指示器控件,开发者可以设置圆环样式和进度条样式两种。

1151
来自专栏HTML5学堂

scrollLeft等属性介绍

HTML5学堂:在平日中书写滚动类特效时,为了提升代码的扩展性,通常会使用变量替换掉常量,此时会经常用到scrollLeft、offsetWidth、clien...

2835
来自专栏大数据钻研

CSS基础

CSS基础 CSS基础知识 选择器(重要!!!) 继承、特殊性、层叠、重要性 CSS格式化排版 单位和值 盒模型 浮动 相对定位与绝对定位 布局初探 CSS基础...

3335
来自专栏HenCoder

HenCoder Android 开发进阶:自定义 View 1-3 文字的绘制

之前的内容在这里: HenCoder Android 开发进阶 自定义 View 1-1 绘制基础 HenCoder Android 开发进阶 自定义 View...

1632
来自专栏Web 开发

TouchEvent猜想与验证

节前在支援一些移动页面的时候,遇到了蛮多的TouchEvent相关的问题,趁着假期一一验证一下。

990
来自专栏SHERlocked93的前端小站

JS 中的offset、scroll、client总结

经常碰到offset、scroll、client这几个关键字,每次都要各种实验,这里总结一下。

1473
来自专栏阮一峰的网络日志

用Javascript获取页面元素的位置

制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置。 下面的教程总结了Javascript在网页定位方面的相关知识。 一、网页的大小和浏览器窗口的大小...

4267
来自专栏前端知识分享

第52天:offset家族、scroll家族和client家族的区别

1412
来自专栏我的博客

自学DIV+CSS总结

1、CSS有四种控制方式:行内样式、内嵌式、链接式、导入式(优先级从高到低) 2、CSS选择器有:标记选择器(p、ul、a、li、img、span、input、...

2656
来自专栏极客猴

会变色的TextView

近几年来,网络直播可以说是非常火热。网红也是遍地花开,其中不少主播在 PC 端做直播,也有很多主播用手机来直播。主播和观众经常需要互动交流,所以文字交流必不可少...

551

扫码关注云+社区