currentstyle 和 getComputedStyle—JS学习笔记2015-6-17(第59天)
2015-06-17 23:43
579 查看
getComputedStyle 和 currentStyle
获得到的是计算机(浏览器)计算后的样子;
ie8 以及更早ie浏览器,无法兼容该方法;
可以使用currentStyle // 不过标准浏览器下却不兼容;
这两种方法的适用范围和注意事项(以后会有解决方案,比如正则, 学东西不要死板):
复合样式获取不到,会有兼容性问题,比如:background
想到得到背景颜色, 应该是backgroundColor
获取单一样式,而不要获取复合样式
不要有空格;
不要获取未设置后的样式:不兼容
获得到的是计算机(浏览器)计算后的样子;
ie8 以及更早ie浏览器,无法兼容该方法;
可以使用currentStyle // 不过标准浏览器下却不兼容;
这两种方法的适用范围和注意事项(以后会有解决方案,比如正则, 学东西不要死板):
复合样式获取不到,会有兼容性问题,比如:background
想到得到背景颜色, 应该是backgroundColor
获取单一样式,而不要获取复合样式
不要有空格;
不要获取未设置后的样式:不兼容
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> div { width:100px; height:120px; background:red; } </style> <script src="miaov.js"></script> <script> $(function(){ // $('div1').style.width = '300px'; $('btn1').onclick = function (){ // alert( $('div1').style.width ); // $('div1').style.cssText = 'width:350px;'; // alert( getComputedStyle( $('div1') ).width ); // IE6 7 8 不兼容 // alert( $('div1').currentStyle.width ); // 标准浏览器不兼容 /* if( $('div1').currentStyle ){ alert( $('div1').currentStyle.width ); } else { alert( getComputedStyle( $('div1'), 250 ).width ); // FF 4.0 之前 } */ // alert( getStyle( $('div1'), 'width' ) ); // alert( getStyle( $('div1'), 'height' ) ); alert( getStyle( $('div1'), 'marginRight' ) ); /* 获取到的是计算机(浏览器)计算后的样式 background: url() red …… 复合样式(不要获取) backgroundColor 单一样式(不要用来做判断) 不要有空格 不要获取未设置后的样式:不兼容 */ }; }); </script> </head> <body> <input id="btn1" type="button" value="按钮" /> <div id="div1"></div> </body> </html>
相关文章推荐
- 理解Javascript_03_javascript全局观
- 理解Javascript_02_理解undefined和null
- 理解Javascript_01_理解内存分配
- FastJSON
- 基于js的网页计算器实现
- js删除提示的插件实现
- javascript数组基础知识(一)
- JS练习题之字符串一
- JavaScript 的 Promise
- smarty向js传递变量时应该注意的问题
- js跨域问题
- JSP九大内置对象2015-06-17
- JSP的七大动作指令2015-06-17
- JSP的三大编译指令2015-06-17
- js运行程序堆栈记录分析
- javaScript一些函数--Math()
- js--小结③
- [转] Boost解析JSON格式
- JSF页面间传值精辟总结
- C#关于json字符串解析的封装