`
wangemperor
  • 浏览: 40117 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

js中用cssText设置css样式 (

 
阅读更多
如果网页中一个 id为“no”的标签,暂且当div标签来tell;
想要在js中设置这个div的css样式,很一般的做法是:
var obj = document.getElementByIdx_x_x('no');
obj.style.width = '400px';
obj.style.height = '300px';
如果要设置一堆又一堆的css样式呢,太麻烦了把、
一般情况下都会结合css来添加className或者改变className达到想要的效果,但是如果你create一个元素,难道还想这样简单点?那就要想别的办法了~
于是大家就写了一个又一个的函数,经典的两个是:
var obj = document.getElementByIdx_x_x('no');
function setStyle(obj, css) {
for(var attr in obj){
obj.style[attr] = css[attr];
}
}
setStyle(obj,{width:"400px",height:"300px"});

当然还有更简单的,cssText:
var obj = document.getElementByIdx_x_x('no');
obj.style.cssText = "width:400px; height:300px;";
当然这种方法对于create的元素初始化css样式来说很简单很方便。
分享到:
评论

相关推荐

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

    首先,传统的JavaScript样式设置方式是逐个属性进行操作,例如: ```javascript var obj = document.getElementById('no'); obj.style.width = '400px'; obj.style.height = '300px'; ``` 这种方式适用于只修改一...

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

    总的来说,`cssText`属性是JavaScript中设置CSS样式的一种强大工具,尤其在需要快速设置多个样式属性时。通过合理利用`cssText`,我们可以编写出更加简洁、高效的JavaScript代码,提升网页的动态表现力。在实际开发...

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

    然而,需要注意的是,虽然`cssText`在性能上可能有优势,但在某些复杂场景下,例如需要动态计算样式值或者处理复杂的CSS选择器时,直接使用`cssText`可能不如逐个设置属性灵活。此外,如果只修改单个样式属性,直接...

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

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

    js setattribute批量设置css样式

    总之,`setAttribute`和`style.cssText`都是JavaScript中用于动态设置CSS样式的强大工具。尽管`setAttribute`在某些浏览器中可能不完全支持,但`style.cssText`作为更通用的方法,已经在现代浏览器中广泛接受。在...

    JS设置CSS1

    在JavaScript中,对CSS样式的操作是Web开发中不可或缺的一部分。本文将详细讲解如何使用JavaScript来设置CSS,主要关注以下几个方面: 1. **直接设置 `style` 属性**: 当需要修改元素的内联样式时,可以直接访问...

    JavaScript修改css样式style动态改变元素样式

    需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。 调用方法: 如果改变className,则事先在样式表中申明类,但...

    用JS动态设置CSS样式常见方法小结(推荐)

    本文将详细讲解如何使用JS来动态设置CSS样式,包括以下几种常见方法: 1. **直接设置`style`对象的属性** 这是最直接的方法,可以直接通过元素的`style`对象来设置样式。例如: ```javascript element.style....

    js添加css样式小技巧

    ### js添加css样式小技巧 在前端开发过程中,经常需要使用JavaScript动态地为网页元素添加或修改CSS样式。本文将详细介绍几种使用JavaScript添加CSS样式的技巧,并解释它们的工作原理及适用场景。 #### 一、使用`...

    原生JS实现获取及修改CSS样式的方法

    本文将详细讲解如何使用原生JS来获取和修改CSS样式,包括行内样式、内部样式以及外部样式,同时也会涉及浏览器兼容性问题。 一、行内样式获取 行内样式是直接在HTML元素的`style`属性中定义的样式。例如: ```html ...

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

    在本文中,我们将深入探讨如何使用 JavaScript 动态修改 CSS 样式表,从而实现对网页外观的实时更新。 首先,我们需要理解 CSS 样式表是如何工作的。CSS(Cascading Style Sheets)用于定义 HTML 或 XML(包括如 ...

    JS设置CSS样式的方式汇总

    以下是一些主要的JS设置CSS样式的方法: 1. **直接设置`style`属性** 这是最直接的方法,通过元素的`style`对象来设置样式。例如: ```javascript element.style.height = '100px'; ``` 注意,如果CSS属性名...

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

    在JavaScript中,对CSS样式的操作是Web开发中常见的任务,而如何高效地进行这些操作则直接影响了网页的性能。本文通过一个简单的测试案例探讨了使用`cssText`属性批量操作样式相对于逐个设置样式属性的性能优势。 ...

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

    在本文中,我们将详细探讨如何利用JavaScript动态修改CSS样式表。主要分为以下几个知识点: 1. **直接通过DOM操作修改样式** 在JavaScript中,可以通过操作DOM元素的style属性来直接修改元素的样式。例如: ```...

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

    3. **优先级问题**:`cssText`设置的是内联样式,其优先级高于内部样式表(`<style>`标签)和外部样式表(`.css`文件),但低于`!important`声明的样式。 为了优化性能,可以考虑以下策略: - **批量操作**:尽可能...

    用cssText批量修改样式

    3. **样式优先级**:使用 `cssText` 设置样式时,这些样式会被视为内联样式,具有较高的优先级。如果已有其他样式定义,可能会被覆盖,需要注意这一点以免引起不必要的样式冲突。 #### 六、总结 通过使用 `cssText...

    原生js更改css样式的两种方式

    2. 先在CSS样式表中对特定的类如“active类”设置样式(这里的active类是假定的,暂时不存在),然后再在javascript代码中通过node.classname=”active”使得CSS样式表中对active类的样式设置附加到该node节点上来。...

    js改变css样式的三种方法推荐

    在JavaScript中,动态地改变CSS样式是常见的需求,特别是在创建交互式网页时。本文将详细介绍三种使用JavaScript修改CSS样式的有效方法。 1. 使用`cssText`属性 `cssText`属性允许我们一次性设置或替换元素的所有...

Global site tag (gtag.js) - Google Analytics