巧用cssText属性

给一个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;

}

时间: 2024-12-29 07:49:10

巧用cssText属性的相关文章

巧用cssText属性批量操作样式

原链接: 巧用cssText属性批量操作样式 给一个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

巧用cssText属性批量操作样式【转】

给一个HTML元素设置css属性,如 var head= document.getElementById("head"); head.style.width = "200px"; head.style.height = "70px"; head.style.display = "block"; 这样写太罗嗦了,为了简单些写个工具函数,如 function setStyle(obj,css){ for(var atr in cs

用cssText属性批量操作样式

给一个HTML元素设置css属性,如 var head= document.getElementById("head"); head.style.width = "200px"; head.style.height = "70px"; head.style.display = "block"; 这样写太罗嗦了,为了简单些写个工具函数,如 function setStyle(obj,css){  for(var atr in c

C#集合篇,在业务背景下(***产品升级管理):依赖注入,变量声明,三元表达式,常用字符串相关操作方法,ADO.NET,EF机制,T4模板自动生成实体类,ref变量巧用,属性实际运用,唯一性验证

QQ:1187362408 欢迎技术交流和学习 关于系统产品升级报告管理,业务需求: TODO: 1,升级报告管理:依据各县区制定升级报告(关联sAreaCode,给每个地区观看具体升级报告信息) 2,运用的技术:依赖注入,变量声明,三元表达式,常用字符串相关操作方法,ADO.NET,EF机制,T4模板自动生成实体类,ref变量与可null变量巧用,属性实际运用,唯一性验证,url传递中文编码和解码问题 讲解篇:1,服务端aspx,2,服务端后台返回数据(这里采用服务器端程序:aspx.cs)

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

一直使用jQuery的hover()函数来写鼠标经过事件,这几天发现其他同行直接使用CSS就搞定了.自己在线下也试了试: 当然也并不是没有前提条件,需要配合一些定位属性来使用(position/top/left).代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l

cssText

给一个HTML元素设置css属性,如 var head= document.getElementById("head"); head.style.width = "200px"; head.style.height = "70px"; head.style.display = "block"; function setStyle(obj,css){ for(var atr in css){ obj.style[atr] = c

使用 jQuery 修改 css 中带有 !important 的样式属性

外部样式为: div.test { width:auto !important; overflow:auto !important } 通过 $("div.test").css("width","100px"); 和 $("div.test").css("width","100px !important"); 是无效的 要想修改 div 的 width,可以通过如下这种方式: 1 $(&

改变div属性的一个实例

<style>#outer{width:500px;margin:0 auto;padding:0;text-align:center;}#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}</style> <script>var changeStyle = function (elem, attr, value){ elem.style[attr] = valu

网页性能管理详解:浅谈chrome-Timeline及window.requestAnimationFrame()方法

你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个开发者,肯定不愿意看到这种情况,那么怎样才能提高性能呢? 本文将详细介绍性能问题的出现原因,以及解决方法. 一.网页生成的过程 要理解网页性能为什么不好,就要了解网页是怎么生成的. 网页的生成过程,大致可以分成五步. HTML代码转化成DOM CSS代码转化成CSSOM(CSS Object Model