JS中给一个html元素设置css属性,可以通过style属性来操作
var head= document.getElementById("head");
head.style.width = "200px";
head.style.height = "70px";
head.style.display = "block";
如果要设置的样式很多,这样写太罗嗦了,而且会造成浏览器渲染的reflow,懒人总是用懒办法,不是说程序员要越懒越好嘛,还有就是 懒人推动了科技的发展
function setStyle(obj,css){
for(var atr in css)
obj.style[atr] = css[atr];
}
var head= document.getElementById("head");
setStyle(head,{width:"200px",height:"70px",display:"block"})
Firefox中还可以通过setAttribute来设置style样式
dom.setAttribute("style","width:10px;height:10px;border:solid 1px red;")
一不小心造了个轮子,原来javaScript中有个现成的cssText属性,兼容各个浏览器,语法为:obj.style.cssText="样式";
var head= document.getElementById("head");
head.style.cssText="width:200px;height:70px;display:bolck";
通过js的cssText来批量修改样式目的是尽量避免页面reflow,提高性能
分享到:
相关推荐
代码如下:<...<head runat=”server”> <title></title> <style type=”text/css”> .day { background-color:White;...script language=”javascript” type=”text/jav
给一个HTML元素设置css属性,如 代码如下: var head= document.getElementById(“head”); head.style.width = “200px”; head.style.height = “70px”; head.style.display = “block”; 这样写太罗嗦了,为了...
ProximityEffect.js v3.0.0-a4 基于鼠标指针或其他任意元素接近度批量修改元素的 CSS 属性。 非常可定制,绝对过度开发。 一个有趣的宠物项目,最初来自 Flash 时代,用 JS 重新制作作为练习项目。 版本 3 进行了 ...
12.5.html JavaScript实现批量更改CSS样式。 12.6.html JavaScript使用CSS模拟图片的圆角效果。 style.css 页面中嵌入的CSS样式文件。 style1.css 更改样式时使用的CSS样式文件。 roundcorner.css ...
首先要感谢 EtherDream 的不同观点,在 巧用cssText属性批量操作样式 一篇中由于他的质疑态度使我做了进一步的测试。
9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的封装 继承 多态 9-30 6 面向对象的封装 继承 多态2 9-5 1.php xml编程①-xml基本介绍 xml...
CSS全称是cascading style sheets,中文名字叫级联样式单,也叫层叠样式表。它的好处就是能让代码整齐,并且可以批量处理一些样式。 基本语法: 注释符:/* */ 选择符:selector {attribute:value} 同一个属性的值用...
如:<iframe style="visibility: visible" name="FrameId" width="100%" height="30%" src="NeedPrintedPage.asp">下面的pringFrame js函数将只打印Iframe中的内容,可以直接引用使用,如printFrame(FrameId);...
调整:为兼容电驴、快播等特殊URL,超链接、图片、FLASH和多媒体4个按钮的批量插入分隔符,由原先的“|”变更为制表符(\t) 调整:编辑器初始化代码由原先的xheditor(true,参数)精简为xheditor(参数)
9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的封装 继承 多态 9-30 6 面向对象的封装 继承 多态2 9-5 1.php xml编程①-xml基本介绍 xml...
9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的封装 继承 多态 9-30 6 面向对象的封装 继承 多态2 9-5 1.php xml编程①-xml基本介绍 xml...
9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的封装 继承 多态 9-30 6 面向对象的封装 继承 多态2 9-5 1.php xml编程①-xml基本介绍 xml...
9-30 2 javascript的闭包 js变量作用域 9-30 3 仿超级玛丽兄弟游戏制作 9-30 4 构造方法 对象的常用操作 9-30 5 面向对象的封装 继承 多态 9-30 6 面向对象的封装 继承 多态2 9-5 1.php xml编程①-xml基本介绍 xml...
|--layout布局样式之style配置 |--listview 页面 图片加文字 |--ListView之CursorAdapter异步查询框架之短信 |--ListView之动态添加子view |--ListView优化之分页加载 |--ListView优化之动态加载 |--ListView优化之...
·修订css统一整理至一个Style文件夹下,方便Div+css管理 ·增加原来删除的天气提示功能 ·增加网站批量删除 ·整合优化样式表 ver2.1.22 ·修订网址排序前后台不一致 ·修订后台验证 ·修订后台管理“网址网站管理...