脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → cssText属性批量操作样式

js中巧用cssText属性批量操作样式

 更新时间：2011年03月13日 23:33:21   作者：  
js中巧用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] = css[atr];
}
}
var head= document.getElementById("head");
setStyle(head,{width:"200px",height:"70px",display:"block"})

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

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

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

但cssText也有个缺点，会覆盖之前的样式。如
复制代码 代码如下:

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

想给该div在添加个css属性width
复制代码 代码如下:

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

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

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返回值没";"则补上
复制代码 代码如下:

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;
}

相关：
http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration
https://developer.mozilla.org/en/DOM/CSSStyleDeclaration

您可能感兴趣的文章:

相关文章

  • 如何学JavaScript？前辈的经验之谈

    如何学JavaScript？前辈的经验之谈

    这篇文章主要介绍了如何学JavaScript？前辈的经验之谈，也就是怎么学前端的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JavaScript常用工具函数库汇总

    JavaScript常用工具函数库汇总

    业务中比较常用的JavaScript工具函数，可以用在前端环境，也可以用在node服务端，统一整理，方便查阅，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
    2020-09-09
  • JS中DOM元素的attribute与property属性示例详解

    JS中DOM元素的attribute与property属性示例详解

    这篇文章主要给大家介绍了关于JS中DOM元素的attribute与property属性的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧
    2018-09-09
  • 3种js实现string的substring方法

    3种js实现string的substring方法

    这篇文章主要介绍了3种javascript实现string的substring方法，需要的朋友可以参考下
    2015-11-11
  • 常用的javascript设计模式

    常用的javascript设计模式

    本文主要介绍了常用的javascript设计模式:单体模式;工厂模式;单例模式;观察者模式（发布订阅模式）;策略模式等。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • Knockoutjs 学习系列(一)ko初体验

    Knockoutjs 学习系列(一)ko初体验

    本篇主要简单介绍了knockoutjs中最重要的概念：可观察对象（数组）。非常不错具有参考借鉴价值，感兴趣的朋友快来围观吧
    2016-06-06
  • uniapp微信小程序多环境配置以及使用教程

    uniapp微信小程序多环境配置以及使用教程

    前后端分离开发模式中,无论前后端都有可能区分不同的环境配置,下面这篇文章主要给大家介绍了关于uniapp微信小程序多环境配置以及使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • JavaScript对JSON数据进行排序和搜索

    JavaScript对JSON数据进行排序和搜索

    今天教给大家如何使用数组的方法来实现JSON数据进行排序和搜索功能，具体实例代码大家参考下本文吧
    2017-07-07
  • ES6如何将 Set 转化为数组示例详解

    ES6如何将 Set 转化为数组示例详解

    这篇文章主要为大家介绍了ES6如何将 Set 转化为数组的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • Bootstrap实现响应式导航栏效果

    Bootstrap实现响应式导航栏效果

    这篇文章主要介绍了Bootstrap实现响应式导航栏效果，导航栏是一个很好的功能，是Bootstrap网站的一个突出特点，本文带领大家学习实现Bootstrap导航栏,需要的朋友可以参考下
    2015-12-12

最新评论