`
zhouyrt
  • 浏览: 1158974 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于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";

 

 

测试浏览器版本如下(与浏览器模式无关):

IE 6/7
IE 8 (Emulate IE7)

IE 8 (Enforce IE8)
Opera 10.10
Firefox 3.5.6
Safari 4.0.3
Chrome 4.0.266.0



分享到:
评论
6 楼 idamag 2010-11-28  
非常方面的属性
5 楼 lixinlixin2008 2010-07-11  
呵呵,在用,只一次reflow,不错
ff上还有其他方法能达到一样的效果
4 楼 qbaty 2010-07-09  
而且这个不会引起reflow是非常赞成用的方法
3 楼 dukai1008 2010-07-09  
呵呵,这个属性还真不错哦

下次试试看,这功能和JQUERY的CSS属性有点像哦

楼主有空对我的网站测试看看,提点宝贵的意见哦

我的站是http://www.dukai168.cn
2 楼 LuoYer 2010-07-07  
刚刚学习,正好用上,谢谢lz
1 楼 damocreazy 2010-01-20  
说实话,我还没用过css属性,真的很妙,谢谢楼主

相关推荐

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

    ### js中巧用cssText属性批量操作样式 #### 概述 在JavaScript中,`cssText`属性提供了一种高效的方式来批量修改HTML元素的样式。相比于传统的逐个设置`style`属性的方法,`cssText`可以一次性设置多个样式规则,这...

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

    然而cssText属性也有其局限性,例如在IE6、IE7和IE8等旧版本的浏览器中,cssText属性返回的值可能不包含分号(;),这就导致了在这些浏览器上使用时可能出现问题。为了解决这个问题,我们需要对cssText属性的值进行...

    js中用事实证明cssText性能高的问题.docx

    本文通过一个实际的测试案例探讨了使用`cssText`属性与单独设置样式属性之间的性能差异。 首先,我们要理解`cssText`属性。在JavaScript中,`element.style.cssText`是一个字符串,它允许我们一次性设置或获取元素...

    JavaScript中的style.cssText使用教程

    本文将重点介绍其中的一种方法——style.cssText属性。 首先需要明确的是,cssText属性是JavaScript中用于设置或获取HTML元素内联样式的一个属性。它属于元素对象的style属性的一个子属性。通过cssText属性,开发者...

    js中用cssText设置css样式的简单方法.docx

    `cssText`属性是CSSStyleDeclaration接口的一个成员,它允许开发者通过字符串形式一次性设置多个CSS样式。本文将详细讲解如何使用`cssText`在JavaScript中便捷地设置CSS样式。 首先,传统的JavaScript样式设置方式...

    js中用事实证明cssText性能高的问题

    本文通过一个简单的测试案例探讨了使用`cssText`属性批量操作样式相对于逐个设置样式属性的性能优势。 首先,我们要理解`cssText`属性的作用。在JavaScript中,每个DOM元素的`style`对象提供了直接修改内联样式的...

    js中用cssText设置css样式的简单方法

    在JavaScript中,使用cssText属性来设置样式是一种非常便捷的方法,尤其是在需要一次性设置多个CSS属性时。传统的做法通常是通过为每个样式属性单独赋值来修改样式,例如: ```javascript var obj = document....

    用cssText批量修改样式

    #### 二、cssText属性简介 `cssText` 是一个字符串属性,可以用来读取或设置一个元素的所有内联样式。它支持CSS样式的复合写法,即可以一次性设置多个样式属性,而无需逐个调用 `element.style.propertyName` 形式...

    CSS属性在Javascript中对应表

    在网页开发中,CSS(Cascading Style Sheets)和JavaScript是两种至关重要的技术。...此外,学习使用`getComputedStyle()`方法获取计算后的样式,以及`style.cssText`属性一次性设置多个样式也是十分重要的。

    仅在IE6/7/8下cssText返回值少了分号的测试代码

    在Web开发中,尤其是在处理CSS样式时,`cssText`属性是一个非常重要的工具。这个属性允许我们以字符串的形式获取或设置一个元素的样式信息。然而,不同的浏览器在实现这个属性时可能存在差异,其中IE6、IE7和IE8就是...

    通过js为元素添加多项样式,浏览器全兼容写法

    虽然cssText属性在大多数现代浏览器中表现良好,但在IE8及更早版本的浏览器中,使用cssText属性添加样式时有个特别注意的地方:在IE8及以下版本浏览器中,返回的cssText字符串最后一个样式规则末尾没有分号。...

    JS批量操作CSS属性详细解析

    总结来说,JavaScript提供了丰富的API来操作DOM元素的CSS属性,包括直接设置`style`对象的属性、使用`cssText`以及通过类列表操作。开发者可以根据具体需求选择合适的方式来实现CSS属性的批量操作,以实现动态效果和...

    JavaScript动态改变div属性的实现方法

    在这个点击事件的函数中,首先判断当前input元素是否是最后一个元素,如果是,则清空div的样式(使用oDiv.style.cssText=""实现)。如果不是最后一个元素,则根据当前input元素对应的属性索引(保存在this.index变量...

    JS设置CSS1

    最后,可以使用`cssText`属性一次性设置元素的所有内联样式。这会覆盖之前所有的内联样式: ```javascript element.style.cssText = 'height: 100px !important; color: red;'; element.style.cssText += 'font-...

    JavaScript样式.docx

    此外,style对象的cssText属性可以用来获取或设置元素的所有内联样式文本。然而,style属性仅能反映元素自身的内联样式,而不包括外部样式表或继承的样式。 在获取元素的实际应用样式时,IE和W3C DOM有不同的方法。...

Global site tag (gtag.js) - Google Analytics