给一个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
分享到:
相关推荐
### js中巧用cssText属性批量操作样式 #### 概述 在JavaScript中,`cssText`属性提供了一种高效的方式来批量修改HTML元素的样式。相比于传统的逐个设置`style`属性的方法,`cssText`可以一次性设置多个样式规则,这...
然而cssText属性也有其局限性,例如在IE6、IE7和IE8等旧版本的浏览器中,cssText属性返回的值可能不包含分号(;),这就导致了在这些浏览器上使用时可能出现问题。为了解决这个问题,我们需要对cssText属性的值进行...
本文通过一个实际的测试案例探讨了使用`cssText`属性与单独设置样式属性之间的性能差异。 首先,我们要理解`cssText`属性。在JavaScript中,`element.style.cssText`是一个字符串,它允许我们一次性设置或获取元素...
本文将重点介绍其中的一种方法——style.cssText属性。 首先需要明确的是,cssText属性是JavaScript中用于设置或获取HTML元素内联样式的一个属性。它属于元素对象的style属性的一个子属性。通过cssText属性,开发者...
`cssText`属性是CSSStyleDeclaration接口的一个成员,它允许开发者通过字符串形式一次性设置多个CSS样式。本文将详细讲解如何使用`cssText`在JavaScript中便捷地设置CSS样式。 首先,传统的JavaScript样式设置方式...
本文通过一个简单的测试案例探讨了使用`cssText`属性批量操作样式相对于逐个设置样式属性的性能优势。 首先,我们要理解`cssText`属性的作用。在JavaScript中,每个DOM元素的`style`对象提供了直接修改内联样式的...
在JavaScript中,使用cssText属性来设置样式是一种非常便捷的方法,尤其是在需要一次性设置多个CSS属性时。传统的做法通常是通过为每个样式属性单独赋值来修改样式,例如: ```javascript var obj = document....
#### 二、cssText属性简介 `cssText` 是一个字符串属性,可以用来读取或设置一个元素的所有内联样式。它支持CSS样式的复合写法,即可以一次性设置多个样式属性,而无需逐个调用 `element.style.propertyName` 形式...
在网页开发中,CSS(Cascading Style Sheets)和JavaScript是两种至关重要的技术。...此外,学习使用`getComputedStyle()`方法获取计算后的样式,以及`style.cssText`属性一次性设置多个样式也是十分重要的。
在Web开发中,尤其是在处理CSS样式时,`cssText`属性是一个非常重要的工具。这个属性允许我们以字符串的形式获取或设置一个元素的样式信息。然而,不同的浏览器在实现这个属性时可能存在差异,其中IE6、IE7和IE8就是...
虽然cssText属性在大多数现代浏览器中表现良好,但在IE8及更早版本的浏览器中,使用cssText属性添加样式时有个特别注意的地方:在IE8及以下版本浏览器中,返回的cssText字符串最后一个样式规则末尾没有分号。...
总结来说,JavaScript提供了丰富的API来操作DOM元素的CSS属性,包括直接设置`style`对象的属性、使用`cssText`以及通过类列表操作。开发者可以根据具体需求选择合适的方式来实现CSS属性的批量操作,以实现动态效果和...
在这个点击事件的函数中,首先判断当前input元素是否是最后一个元素,如果是,则清空div的样式(使用oDiv.style.cssText=""实现)。如果不是最后一个元素,则根据当前input元素对应的属性索引(保存在this.index变量...
最后,可以使用`cssText`属性一次性设置元素的所有内联样式。这会覆盖之前所有的内联样式: ```javascript element.style.cssText = 'height: 100px !important; color: red;'; element.style.cssText += 'font-...
此外,style对象的cssText属性可以用来获取或设置元素的所有内联样式文本。然而,style属性仅能反映元素自身的内联样式,而不包括外部样式表或继承的样式。 在获取元素的实际应用样式时,IE和W3C DOM有不同的方法。...