给一个HTML元素设置css属性,如

1
2
3
4
var head= document.getElementById("head");
head.style.width = "200px";
head.style.height = "70px";
head.style.display = "block";

这样写太罗嗦了,为了简单些写个工具函数,如

1
2
3
4
5
6
7
function setStyle(obj,css){
  for(var atr in css){
    obj.style[atr] = css[atr];
  }
}
var head= document.getElementById("head");
setStyle(head,{width:"200px",height:"70px",display:"block"})

发现 Google API 中使用了cssText属性,后在各浏览器中测试都通过了。一行代码即可,实在很妙。如

1
2
var head= document.getElementById("head");
head.style.cssText="width:200px;height:70px;display:bolck";

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

但cssText也有个缺点,会覆盖之前的样式。如

1
<div style="color:red;">TEST</div>

想给该div在添加个css属性width

1
div.style.cssText = "width:200px;";

这时虽然width应用上了,但之前的color被覆盖丢失了。因此使用cssText时应该采用叠加的方式以保留原有的样式。

1
2
3
4
function setStyle(el, strCss){
    var sty = el.style;
    sty.cssText = sty.cssText + strCss;
}

使用该方法在IE9/Firefox/Safari/Chrome/Opera中没什么问题,但由于 IE6/7/8中cssText返回值少了分号 会让你失望。

因此对IE6/7/8还需单独处理下,如果cssText返回值没";"则补上

1
2
3
4
5
6
7
8
9
10
11
12
function setStyle(el, strCss){
    function endsWith(str, suffix) {
        var l = str.length - suffix.length;
        return l >= 0 && str.indexOf(suffix, l) == l;
    }
    var sty = el.style,
        cssText = sty.cssText;
    if(!endsWith(cssText, ';')){
        cssText += ';';
    }
    sty.cssText = cssText + strCss;
}

巧用cssText属性的更多相关文章

  1. 巧用cssText属性批量操作样式

    给一个HTML元素设置css属性,如 1 2 3 4 var head= document.getElementById("head"); head.style.width = & ...

  2. CSSText属性批量修改样式

      给一个HTML元素设置css属性 var head= document.getElementById("head");head.style.width = "200p ...

  3. 用cssText属性批量操作样式

    给一个HTML元素设置css属性,如 var head= document.getElementById("head"); head.style.width = "200 ...

  4. 小tip:巧用CSS3属性作为CSS hack——张鑫旭

    一.开篇小问题 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. 计时思考…… 二.思考中 ————- 假设这是 ...

  5. 巧用TAG属性保存对象的指针

    指针的数据类型是整型,一个指针就是一个整型的数值. 所以凡整型的变量(这个整型的变量可以是声明在INI文件中,也可以是声明在函数中的)也好,对象的整型的属性也好,都可以用来存储一个指针. 但对象往往没 ...

  6. vue利用watch侦听对象具体的属性 ~ 巧用计算属性computed做中间层

    有时候需要侦听某个对象具体的属性,可以按下面案例进行: <template> <div> <input type="text" v-model=&qu ...

  7. 巧用CSS属性visibility与opacity代替鼠标经过的jQuery事件

    一直使用jQuery的hover()函数来写鼠标经过事件,这几天发现其他同行直接使用CSS就搞定了.自己在线下也试了试: 当然也并不是没有前提条件,需要配合一些定位属性来使用(position/top ...

  8. 巧用border属性

    border是常见的css2属性,大家的印象中是不是只是作为边框使用,如下所示: 事实上border,还可以当做图标去使用 我们先来看段代码 <style> .div1{ margin: ...

  9. JavaScript 学习笔记——cssText

    平常编写代码,更改一个元素样式的时候,自己都是用 obj.style.width = "200px"; obj.style.position = "absolute&qu ...

随机推荐

  1. poj2112 最大流+floyd+二分

    题意:给一堆点,一部分是牛,一部分是机器,每头牛必须要走到一个机器,每个点之间有距离,要求每头牛都能找得到一台机器(机器有最大容量)的情况下,走的最远的牛距离最小 题解:二分答案,小于该距离的边才能加 ...

  2. 如何下载中文语言包让Eclipse汉化?

    Eclipse软件是JAVA开发必备的软件,对于英语不好的人而言面对英文代码还好,但是软件也是英语的那就头疼了,怎么解决?可以去官网下载中文语言包解压到Eclipse安装目录就可以汉化了.   工具/ ...

  3. Mybatis_总结_05_用_Java API

    一.前言 使用 MyBatis 的主要 Java 接口就是 SqlSession.你可以通过这个接口来执行命令,获取映射器和管理事务. 二.主要类 (1)SqlSession 是由 SqlSessio ...

  4. GEF入门实例_总结_01_教程、源码、开发环境准备

    一.前言 最近在学Eclipse插件开发,发现了一个比较好的GEF入门教程,并且按照教程上的操作,一步步实现了一个入门Demo,在此感谢作者的贡献. 好记性不如烂笔头,故决定总结一下这段时间的学习心得 ...

  5. LeetCode OJ:Sum Root to Leaf Numbers(根到叶节点数字之和)

    Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a number ...

  6. WC2018 即时战略

    交互题 一棵树,一开始只有 1 号点是已知的,其他的都是未知的,你可以调用函数 explore(x,y) ,其中 x 必须是已知的,函数会找到 x 到 y 路径上第二个点,并把它标成已知,求最小步数使 ...

  7. 如何卸载Python通过setup.py安装的模块

    0,pip uninstall  xxxx     1.找到egg sudo easy_install -m BitVector .... Using /usr/local/lib/python2./ ...

  8. 《Javascript高级程序设计》阅读记录(六):第六章 下

    这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 <Javascript ...

  9. 学习动态性能表(8)--v$lock&v$locked_object

    学习动态性能表 第八篇-(1)-V$LOCK  2007.5.31 这个视图列出Oracle 服务器当前拥有的锁以及未完成的锁或栓锁请求.如果你觉着session在等待等待事件队列那你应该检查本视图. ...

  10. Python环境的搭建

    Window 平台安装 Python: 以下为在 Window 平台上安装 Python 的简单步骤: 打开WEB浏览器访问http://www.python.org/download/ 在下载列表中 ...