代码描述:getComputedStyle()方法 获取float属性值。getComputedStyle()方法获取float属性值代码实例
如果要获取元素样式的最终值,通常情况下要使用getComputedStyle()方法。 为了兼容低版本的IE浏览器也要配合currentStyle属性使用。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> #antzone{ border:1px red solid; float:left; } </style> <script type="text/javascript"> function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj, false)[attr]; } } window.onload=function(){ var oLi=document.getElementById('antzone'); var oshow=document.getElementById("show"); oshow.innerHTML=(getStyle(oLi,'float')) } </script> </head> <body> <ul> <li id="show"></li> <li id="antzone">51前端</li> </ul> </body> </html>
上面的代码在IE和谷歌浏览器中没有任何问题,可以正确获取float属性值。 但是在火狐浏览器中则无法实现,这是因为float是javascript的保留字,所以要使用cssFloat这种形式。 代码修改如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> #antzone{ border:1px red solid; float:left; } </style> <script type="text/javascript"> function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj, false)[attr]; } } window.onload=function(){ var oLi=document.getElementById('antzone'); var oshow=document.getElementById("show"); if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ oshow.innerHTML=(getStyle(oLi,'cssFloat')) } else{ oshow.innerHTML=(getStyle(oLi,'float')) } } </script> </head> <body> <ul> <li id="show"></li> <li id="antzone">51前端</li> </ul> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能