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. SqlSever基础 dateadd day 增加五天

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  2. ubuntu下php xdebug的安装(配置)

    首先Xdebug要和php版本对应,具体查看官网    https://xdebug.org/ xdebug-2.1.0PHP Version 5.3.10linux下解压xdebug包.1.进入xd ...

  3. CentOS 7 (无盘安装)PXE服务器的搭建(失败求助版)

    折腾了一天半,PXE无盘服务器以暂时失败而告终. 基本原理 1. 首先客户端主机需要支持PXE,大部分主板都支持. 2. PXE服务器需要安装DHCP.TFTP.FTP服务. 3. DHCP服务用来给 ...

  4. FreeSWITCH的传真发送

    详细的学习请参考:https://wiki.freeswitch.org/wiki/Mod_spandsp 我只说说WIKI上没有直接写出来却又很实用的东西. 一.传真收发 环境大致如下: FreeS ...

  5. C# WPF MVVM 实战 – 5- 用绑定,通过 VM 设置 View 的控件焦点

    本文介绍在 MVVM 中,如何用 ViewModel 控制焦点. 这焦点设置个东西嘛,有些争论.就是到底要不要用 ViewModel 来控制视图的键盘输入焦点.这里不讨论,假设你就是要通过 VM,设置 ...

  6. 嵌套结构使用:struc1-struc2-XXX

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

  7. python_way day13 paramiko

    paramiko 一.安装 pip3 install paramiko 二.使用 1.SSHClient 用于连接远程服务器并执行基本命令 import paramiko # 创建SSH对象 ssh ...

  8. Phantomjs 在cmd命令行显示中文乱码

    cmd命令行窗口显示中文乱码 cmd中文支持gbk编码 在js执行文件中加上(一般在最开始加) phantom.outputEncoding="gbk"; 这样乱码就正确了

  9. LINQ之路 2:C# 3.0的语言功能(上)

    在上一篇的LINQ介绍中,我们已经看到了隐式类型变量var,扩展方法(extension method)和lambda表达式的身影.没错,他们正是LINQ技术的基石,是他们让LINQ的实现成为可能,并 ...

  10. 最牛叉的街机游戏合集 & 模拟器

    亲爱的小伙伴们,是否还记得那年我们玩的疯狂的街机游戏吗,街机中心提供400多个街机游戏,让你爽到底. 例如:拳皇96,拳皇97,恐龙新世纪.名将.快打旋风.惩罚者.魂斗罗.超级玛丽.雪山兄弟.忍者神龟 ...