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. Eclipse中没有andriod问题解决方法

    按照网上教程<andriod+环境搭建_图文版>进行安装android,结果,在eclipse中window->preference下找不到"Android"选项 ...

  2. 《微信开发日志》之OAuth2验证接口

    OAuth2接口说明: 企业应用中的URL链接(包括自定义菜单或者消息中的链接),可以通过OAuth2.0验证接口来获取员工的身份信息. 通过此接口获取用户身份会有一定的时间开销.对于频繁获取用户身份 ...

  3. V-rep学习笔记:机器人逆运动学数值解法(The Jacobian Transpose Method)

    机器人运动学逆解的问题经常出现在动画仿真和工业机器人的轨迹规划中:We want to know how the upper joints of the hierarchy would rotate ...

  4. [JAVA设计模式]第四部分:行为模式

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

  5. JZs3c2440学习笔记一

    1.连线 串口线usb-com,USB下载线 2.驱动安装 USB-serial,  dnw的sec s3c2410x test驱动安装(win7下安装方法搜索:百问网WIN7,64,dnw) 3.烧 ...

  6. iOS8 获取通知设置状态

    UIUserNotificationSettings *settings = [[UIApplication sharedApplication] currentUserNotificationSet ...

  7. 字符设备 register_chrdev_region()、alloc_chrdev_region() 和 register_chrdev() (转载)

    1. 字符设备结构体 内核中所有已分配的字符设备编号都记录在一个名为 chrdevs 散列表里.该散列表中的每一个元素是一个 char_device_struct 结构,它的定义如下: static ...

  8. Javascript设计模式之创建构造函数和方法

    构造函数和方法 var Book = function (isbn,title,author) { this.setIsbn(isbn); this.setTitle(title); this.set ...

  9. Linux小知识

    1,ubuntu下,开机如何进行命令行? 图形模式下,首先进入终端: 1. 找到 /etc/default/grub文件: 2. 修改 GRUB_CMDLINE_LINUX_DEFAULT=" ...

  10. JAVA学习提高之----安装多个JDK版本的问题

    我的机器上最开始安装的是jdk1.6,后来因为工作需要又安装了jdk1.4.但是,环境变量我并未更改,还是指向jdk1.6的路径的.可是,在cmd窗口输入 Java -version 却得到是1.4. ...