JavaScript的获取非行间样式
2016-05-09 13:19
344 查看
html节点的样式分为:浏览器默认样式、引用样式(引用外部css文件的样式、style标签内定义的样式)、行间样式(节点style属性定义的样式)
下面就介绍一下如何获取非行间样式。
下面就介绍一下如何获取非行间样式。
<!--DOCTYPE html--> <html> <head> <meta charset="utf-8" /> <style> *{ text-align:center;} input{ margin-top:30px; padding:10px 20px;} #div1{ width:500px; height:300px; background:red; margin:10px auto;} </style> </head> <body> <input type="button" value="style" id="btn" /> <div id="div1"></div> <script> //获取非行间css样式 function getStyle(obj,attr){ //获取非行间样式,obj是对象,attr是值 if(obj.currentStyle){ //针对ie获取非行间样式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; //针对非ie }; }; //为对象写入/获取css样式 function css(obj,attr,value){ //对象,样式,值。传2个参数的时候为获取样式,3个是设置样式 if(arguments.length == 2){ //arguments参数数组,当参数数组长度为2时表示获取css样式 return getStyle(obj,attr); //返回对象的非行间样式用上面的getStyle函数 }else{ if(arguments.length == 3){ //当传三个参数的时候为设置对象的某个值 obj.style[attr] = value; }; }; }; window.onload = function(){ var oDiv = document.getElementById("div1"); var oBtn = document.getElementById("btn"); oBtn.onclick = function(){ alert(getStyle(oDiv,"height")); css(oDiv,"background","green"); alert(css(oDiv,"width")); }; }; </script> </body> </html>
相关文章推荐
- javascript事件监听中传递匿名函数(嵌套定义的命名函数)与命名函数的区别
- JS对象调用属性
- js--String对象方法属性整理
- 2016江苏省大学生程序设计大赛 JSCPC 总结
- js首字母大写
- Servlet & JSP - Listener
- js实现title滚动效果
- js动态创建dom元素示例
- [字母控] 层次选择器的详细说明,祝你早日熟练javascript
- jsp页面输入手机号时进行验证
- js--Math对象的属性方法整理
- javascript DOM选择器querySelector
- js文字转码方法【学习笔记】
- JavaScript中判断为整数的多种方式
- C# Json 转对象
- 普元_js_取值
- js关于字符串空格的处理
- 在JSP程序中我用新图片替换掉了原图片(名字,格式相同),为什么打开网页显示的还是以前的图片呢
- JavaScript -- 简单的canvas标签
- js笔记