<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>getStyle提取非行间样式——只能提取不能设置</title> <style> *{padding:0; margin:0;} #div1{width:300px; height:300px; background:#f00; margin:50px auto;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; border:2px solid #000;} </style> <script> window.onload=function(){ function getStyle(obj,name){ if(obj.currentStyle){ //alert("现在使用的是obj.currentStyle"); return obj.currentStyle[name]; }else{ //alert("现在使用的是getComputedStyle"); return getComputedStyle(obj,false)[name]; }; }; var oDiv=document.getElementById("div1"); alert(getStyle(oDiv,"border-color")); } /*火狐和IE下无法获取border的值,火狐下无法获取border-width的值，火狐下无法获取border-color的值*/ /*window.onload=function(){ function nameForm(name){ var aName=name.split(""); for(var i=0;i<aName.length;i++){ if(aName[i]=="-"){ aName.splice(i,1); aName[i]=aName[i].toUpperCase(); }; }; var sName=aName.join(""); return sName; };//nameForm，名字格式 function getStyle(obj,name){ var oGetStyleMethod=null; if(obj.currentStyle){ oGetStyleMethod=obj.currentStyle; }else{ oGetStyleMethod=getComputedStyle(obj,false); }; if(oGetStyleMethod.getAttribute){ alert("我使用的是getAttribute"); var sName=nameForm(name); return oGetStyleMethod.getAttribute(sName); }else{ alert("我使用的是getPropertyValue"); return oGetStyleMethod.getPropertyValue(name); } }; var oDiv=document.getElementById("div1"); alert(getStyle(oDiv,"border-color")); }*/ /*火狐和IE下无法获取border-radius的值*/ /*经过测试用JQuery中的css()函数也无法获取火狐下border-radius的值*/ </script> </head> <body> <div id="div1"></div> </body> </html>
不能完全兼容所有浏览器，不能完全提取出所有样式……