cssText
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的更多相关文章
- JavaScript 学习笔记——cssText
平常编写代码,更改一个元素样式的时候,自己都是用 obj.style.width = "200px"; obj.style.position = "absolute&qu ...
- 浅谈cssText
给一个HTML元素设置css属性,如 var head= document.getElementById("head"); head.style.width = "200 ...
- CSSText属性批量修改样式
给一个HTML元素设置css属性 var head= document.getElementById("head");head.style.width = "200p ...
- CSS之cssText
更改元素样式 <div style="width:100px;height:100px;text-align:center;line-height:100px;"> T ...
- cssText在 IE6/7/8和chrome/Firefox/IE9+的不同
一,结尾没有分号 <div style="font-size:14px;">test</div> <script type="text/ja ...
- 巧用cssText属性批量操作样式
给一个HTML元素设置css属性,如 1 2 3 4 var head= document.getElementById("head"); head.style.width = & ...
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...
- cssText设置css样式
js中用cssText设置css样式 (2012-08-21 10:40:22) 转载▼ 标签: js 如果网页中一个 id为“no”的标签,暂且当div标签来tell:想要在js中设置这个div ...
- 用cssText属性批量操作样式
给一个HTML元素设置css属性,如 var head= document.getElementById("head"); head.style.width = "200 ...
随机推荐
- How to evaluate a transimpedance amplifier (part 2)
In my previous blog on "How to evaluate a transimpedance amplifier, part 1", we looked at ...
- [SAP ABAP开发技术总结]反射,动态创建内表、结构、变量
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- hdu 1800 (map)
链接:http://acm.hdu.edu.cn/showproblem.php?pid=1800 Flying to the Mars Time Limit: 5000/1000 MS (Java/ ...
- 线程入门之start()和run()的区别
package com.thread; /** * start()和run()的区别 * start():并行执行 * run():方法调用,顺序执行 * @author 95Yang */ publ ...
- run a Freight robot (1)
1. Freight robot The Fetch and Freight Research Edition Robots are indoor laboratory robots. Coordin ...
- python_way day11 自定义线程池
python_way day11 线程池 为什么需要线程池 线程多一些固然好,但是过多的线程反倒影响系统的负荷,所以我们就需要创建合适多的线程,哪我们把线程放到哪里?这时就放到线程池中. 线程池中存放 ...
- bzoj 2242: [SDOI2011]计算器 BSGS+快速幂+扩展欧几里德
2242: [SDOI2011]计算器 Time Limit: 10 Sec Memory Limit: 512 MB[Submit][Status][Discuss] Description 你被 ...
- TCP协议中的三次握手和四次挥手(图解) 转载
建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资 ...
- 妙用||和&&
&&和||在JQuery源代码内尤为使用广泛,由于本人没有系统的学习js,所以只能粗略的自我理解出来,希望大家指点下.粗略理解如下: a() && b() :如果执行a ...
- input与lable水平对齐
CSSinput,label { vertical-align:middle;} html 格式 <label><input/></label> <labe ...