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. centos Linux 统计某个文件夹占用空间大小

    转载自 http://www.07net01.com/linux/centos_Linux_tongjimougewenjianjiazhanyongkongjiandaxiao_12510_1346 ...

  2. C#获取CPUID(MD5输出),网卡ID,主DNS,备用DNS

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  3. Cheatsheet: 2013 11.12 ~ 11.30

    Mobile Xcode 5 Essentials Android vs. iOS Development: Fight! Using MVC to Understand ASP.NET, iOS, ...

  4. CSS的单位及css3的calc()及line-height百分比

    锚点:css中百分比减去固定元素 单位介绍 说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着 ...

  5. [转]Linux下的暴力密码破解工具Hydra详解

    摘自:http://linzhibin824.blog.163.com/blog/static/735577102013144223127/ 这款暴力密码破解工具相当强大,支持几乎所有协议的在线密码破 ...

  6. LINUX DIFF命令详解

    刚才在和公司做离线IP对比,最后手工了,感觉还是比较麻烦的,遇到数据很大的时候不能手工进行了 本想用linux下的DIFF来进行对比,发现结果很乱.时间很紧最后还是手工了. 现在忙完要认认真真学习一下 ...

  7. 4,帮助命令man

    一:man man是manual的缩写,文档的意思 man man(1),代表man下是分用户级别的,

  8. Spring MVC 流程图

    Spring MVC 流程图 分类: Spring2014-02-23 19:49 9106人阅读 评论(2) 收藏 举报 spring mvc Spring MVC工作流程图   图一   图二  ...

  9. [SAP ABAP开发技术总结]SD销售订单定价过程

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  10. ubuntu14.04换一个更快的源

    mirrors.yun-idc.com,这个源可比ubuntu自带的源快多了,我的source.list文件内容如下: deb http://mirrors.yun-idc.com/ubuntu/ t ...