`

巧用cssText属性批量操作样式

    博客分类:
  • html
 
阅读更多
给一个HTML元素设置css属性:
var d= document.getElementById("container");
d.style.height="7px";
d.style.weight="17px";


和innerHTML一样,cssText很快捷且所有浏览器都支持。
一组样式属性及其值的文本表示。将文本格式化为一个 CSS 样式表,去掉了包围属性和值的元素选择器的花括号。

*但会覆盖之前的样式,应该采用叠加的方式以保留原有的样式。

<input type="text" id="inp1" style="height:9px;color:red"/>
<input type="button" onclick="getStyle()"/>  

document.getElementById('inp1').style.cssText;  //获取input标签的样式"width: 220px; height: 20px;"  


//设置标签样式
function getStyle(){
    var addCss=document.getElementById('inp1').value;
    var strCss=document.getElementById('inp1').style.cssText;
    alert(strCss+addCss);
}
function setStyle(el, strCss){
	var sty = el.style;
	sty.cssText = sty.cssText + strCss;
}


http://www.cnblogs.com/snandy/archive/2011/03/12/1980444.html
分享到:
评论

相关推荐

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

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

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

    总结来说,cssText属性是JavaScript中批量操作CSS样式的一个非常有用的工具,它能够提高代码的简洁性和页面的渲染性能。然而,在使用过程中需要注意浏览器兼容性问题以及避免覆盖已有样式。在实际应用中,开发者应该...

    用cssText批量修改样式

    其中,“obj”是指要操作的DOM元素,“样式”是用分号分隔的CSS属性列表。 #### 三、示例演示 假设我们有如下HTML结构: ```html ; height: 100px; background-color: blue;"&gt; ``` 现在我们需要动态修改该元素的...

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

    在JavaScript中,对CSS样式的...总的来说,`cssText`属性提供了一种高效的方式来批量设置元素的样式,尤其在处理大量元素时。然而,具体使用哪种方式应根据项目的具体需求和场景来决定,以实现最佳的性能和可维护性。

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

    此外,使用`cssText`时,要确保CSS规则的语法正确,包括属性名与值之间用冒号分隔,不同属性间用分号分隔,且所有样式都应包含在一对引号之中。同时,因为它是字符串,所以不支持链式调用,如不能直接写`obj.style....

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

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

    js批量设置样式的三种方法不推荐使用with

    在这三种方法中,推荐使用第一种方法(使用JSON对象)进行批量样式设置,因为它不仅效率高,而且代码结构清晰,可读性和可维护性较好。如果项目中有特殊需求,需要一次性设置大量样式,并且对性能有极致要求,第二种...

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

    总结来看,使用cssText属性设置样式的方法相比于传统的逐个属性赋值或者批量设置方法,具有以下几个优点: 1. 简洁性:一行代码即可完成复杂的样式设置,代码更加简洁明了。 2. 高效性:减少代码量,提高代码执行...

    js css样式操作代码(批量操作)

    - **利用CSS类**:通过添加和删除CSS类,利用CSS预处理器(如Sass、Less)进行批量样式定义,可以比直接使用`cssText`更高效。 总之,熟练掌握JavaScript对CSS样式的操作对于优化网页性能至关重要。在大量样式操作...

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

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

    js setattribute批量设置css样式

    `setAttribute`方法和`style.cssText`属性是两种常见的用于改变元素样式的手段,尤其是在JavaScript中批量设置CSS样式时。让我们深入探讨这两种方法。 `setAttribute`是DOM API的一部分,它允许开发者为HTML或XML...

    如何用JavaScript实现动态修改CSS样式表

    如果需要批量修改样式表中的某些属性值(比如颜色),可以使用正则表达式配合字符串的`replace`方法。例如: ```javascript document.styleSheets[0].cssText = document.styleSheets[0].cssText.replace(/red/g,...

    javascript 动态修改样式和层叠样式表代码

    此外,可以使用对象字面量来批量设置多个样式,如 `setStyleById('example', { 'background-color': 'red', 'border': '1px solid black', 'padding': '1px' })`,这种方法使得代码更易读且便于维护。 总结起来,...

    如何提高Dom访问速度

    7. 简化样式操作:对行内样式进行批量设置时,可以使用element.style.cssText属性来一次性改变多个样式属性,这比逐个设置每个样式属性更有效率。 通过这些方法优化DOM操作可以显著提高网页的响应速度和性能。然而...

Global site tag (gtag.js) - Google Analytics