当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js css样式操作代码(批量操作)

Javascript
javascript进行客户端数据的校验
javascript中如何实现浏览器上的右键菜单
用javascript使链接按钮不断变化
利用javascript制作倒计时牌
用javascript实现变色背景和文字
让弹出窗口变得“体贴”一些(javascript)
javascript实例教程(1) 创建弹出式窗口
javascript实例教程(2) 创建折叠式导航菜单
javascript实例教程(3) 探测浏览器插件
javascript实例教程(4) 探测浏览器插件
javascript实例教程(5) 在一个表单中设置和检查Cookies
javascript实例教程(6) 利用javascript进行密码保护
javascript实例教程(7) 利用javascript基于浏览器类型的重定向
javascript实例教程(8) 检验表单有效性
javascript实例教程(9) 随机显示图片
javascript实例教程(10) 创建后退按钮
javascript实例教程(11) 隐藏script代码
javascript实例教程(12) 鼠标移过时报警
javascript实例教程(13) 鼠标触发窗口
javascript实例教程(14) JS代替CGI

Javascript 中的 js css样式操作代码(批量操作)


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 115 ::
收藏到网摘: n/a

用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果。并且考虑到效率。 我们用js书写css样式通常会用下面的两种方式:
一般情况下我们用js设置元素对象的样式会使用这样的形式:
复制代码 代码如下:

var element= document.getElementById(”id”);
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”solid 1px red”;

但是上面的方法有一个缺点,样式一多,代码就很多;而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程,这种销毁和重建,都会增加浏览器的开销。
js中有一个cssText的方法:
语法为:obj.style.cssText(”样式”);
上面的代码我们可以修改成:
复制代码 代码如下:

element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;

这种写法可以尽量避免页面的多次reflow,提高页面性能。