JS 操作style属性
2016-05-04 22:06
591 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>操作style属性</title> <style> #div1{ width:100px; height:100px; background:red; } </style> <script> function setStyle(name,value){ var oDiv=document.getElementById('div1'); oDiv.style[name]=value; //操作属性方法二:[’属性名‘]里面属性名可用变量代替 } function changeEnd() { var oDiv=document.getElementById('div1'); oDiv.style.width=200+"px"; //操作属性方法一点. oDiv.style.height=200+"px"; //不加“px”在chrome里是无法运行的!!! } </script> <body> </head> <input type="button" value="变宽" onclick="setStyle('height','400px')"/> <input type="button" value="变高" onclick="setStyle('width','400px')"/> <input type="button" value="变绿" onclick="setStyle('background','blue')"/> <input type="button" value="还原" onclick="changeEnd()"/> <div id="div1"></div> </body> </html>
相关文章推荐
- JSP中的遗留问题
- JSP技术概述
- JavaScript对象的常用函数
- JavaScript之单例实战
- BabylonJS文件格式---基于WebGL的H5 3D游戏引擎
- JavaScript学习之DOM编程
- WebBasic05-JS
- Javascript学习之常用对象
- javascript 闭包
- JSP网页之间get传参乱码
- JSTL下载与配置
- JavaScript -- 制作简易瀑布流
- JavaScript学习随记——错误类型
- html+Ajax和JSP的比较
- 5种JavaScript和CSS交互的方法
- JS无提示关闭浏览器窗口脚本以及不同浏览器对window.close()不同表现
- js 实现数字的进制转换
- JavaScript 设计模式之工厂模式
- 原生JS实现字符串分割
- JavaScript ECAMScript5 新特性——get/set访问器