cssText 的本质就是设置 HTML 元素的 style 属性值

cssText 的方便之处在于一次可以写很多属性,而且变更 CSS 样式不必变 JS 代码,只需变样式字符串。但它有个缺点,就是它会覆盖掉前面的属性。

例子:

<div id="d1">test</div>
<script type="text/javascript">
document.getElementById("d1").style.width="100px";
document.getElementById("d1").style.cssText = "color:red; font-size:13px;text-decoration:underline;";
alert(document.getElementById("d1").style.cssText);
</script>

上例中test的颜色为红色,字号13px;有下划线,但是宽度不是100px;因为被覆盖掉了

cssText用法

<div id="d1">test</div>
<script type="text/javascript">
var od1=document.getElementById('d1');
od1.style.color="#fff";
od1.style.backgroundColor="#c66";
od1.style.width="100px";
od1.style.fontSize="14px";
</script>

改写

<div id="d1">test</div>
<script type="text/javascript">
var od1=document.getElementById('d1');
od1.style.cssText="color:#fff;background-color:#c66;width:100px;font-size:14px;";
</script>

节省了代码。

但是在IE6、7、8下会有问题

cssText的更多相关文章

  1. JavaScript 学习笔记——cssText

    平常编写代码,更改一个元素样式的时候,自己都是用 obj.style.width = "200px"; obj.style.position = "absolute&qu ...

  2. 浅谈cssText

    给一个HTML元素设置css属性,如 var head= document.getElementById("head"); head.style.width = "200 ...

  3. CSSText属性批量修改样式

      给一个HTML元素设置css属性 var head= document.getElementById("head");head.style.width = "200p ...

  4. CSS之cssText

    更改元素样式 <div style="width:100px;height:100px;text-align:center;line-height:100px;"> T ...

  5. cssText在 IE6/7/8和chrome/Firefox/IE9+的不同

    一,结尾没有分号 <div style="font-size:14px;">test</div> <script type="text/ja ...

  6. 巧用cssText属性批量操作样式

    给一个HTML元素设置css属性,如 1 2 3 4 var head= document.getElementById("head"); head.style.width = & ...

  7. 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

  8. cssText设置css样式

    js中用cssText设置css样式 (2012-08-21 10:40:22) 转载▼ 标签: js   如果网页中一个 id为“no”的标签,暂且当div标签来tell:想要在js中设置这个div ...

  9. 用cssText属性批量操作样式

    给一个HTML元素设置css属性,如 var head= document.getElementById("head"); head.style.width = "200 ...

随机推荐

  1. ASP.NET导入导出

    //创建一个数据链接 // string strCon =" Provider=Microsoft.Jet.OLEDB.4.0;Data Source={0} ;Extended Prope ...

  2. maven入门教程

    一.Maven 是什么? Maven 英文名称:专家,由名字可见,这个工具野心非常大.有人说他是"构建工具",一个用来把源代码构建成可发布的构件的工具.也有人说是项目管理工具. 官 ...

  3. matplotlib

    前导: 安装 numpy http://sourceforge.net/projects/numpy/files/ http://sourceforge.net/projects/numpy/file ...

  4. python 内建函数功能函数 abs() coerce() divmod() round() pow()

    >>> abs(-1)1>>> abs(10.)  10.0>>> abs(1.2-2.1j)2.4186773244895647>> ...

  5. NPO与X7R、X5R、Y5V、Z5U神马的有啥区别

    主要是介质材料不同.不同介质种类由于它的主要极化类型不一样,其对电场变化的响应速度和极化率亦不一样. 在相同的体积下的容量就不同,随之带来的电容器的介质损耗.容量稳定性等也就不同.介质材料划按容量的温 ...

  6. FZU 2214 Knapsack problem(背包问题)

    Description 题目描述 Given a set of n items, each with a weight w[i] and a value v[i], determine a way t ...

  7. [转]-Gradle使用手册(二):项目结构

    原文地址:http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Using-sourceCompatibility-1. ...

  8. NSDate使用

    //获取当前日期,时间 +(NSDate *)getCurrentDate{     NSDate *now = [NSDate date];     return now; } //将日期转换为字符 ...

  9. [转载] linux 程序运行过程中替换文件

    今天被朋友问及“Linux下可以替换运行中的程序么?”,以前依稀记得Linux下是可以的(而Windows就不让),于是随口答道“OK”.结果朋友发来一个执行结果:(test正在运行中)# cp te ...

  10. [转载] 彻底学习STL中的Allocator

    原文: http://cissco.iteye.com/blog/379093 帮助我们理解allocator的原理 Allocator是C++语言标准库中最神秘的部分之一.它们很少被显式使用,标准也 ...