JS 获取最终样式 【getStyle】

核心提示：1#flower{2width:100px;3font-size:12px;4float:left;5opacity:0.5;6filter:alpha(opacity=50);7}定义一个id="flower"的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性

1　#flower　{
2　　　　　width:100px;
3　　　　　font-size:12px;
4　　　　　float:left;
5　　　　　opacity:0.5;
6　　　　　filter:alpha(opacity=50);　
7　　}

定义一个id="flower"的div元素 并设置如上样式,我们的目标就是通过javascript来获取样式的最终属性

<div　id="flower"　>...</div>

getStyle函数:

这里用到了三个原型扩展

String.prototype.capitalize 这个方法是让字符串首字母大写

Array.prototype.contains　 判断数组中是否有指定成员

String.prototype.camelize　 这个是让"font-size" 字符串转换成 "fontSize"　 这样的格式用来获取样式

String.prototype.capitalize=function(){
　　　　return　this.charAt(0).toUpperCase()　+　this.substring(1).toLowerCase();
}
Array.prototype.contains=function(A){
　　　　　return　(this.indexOf(A)　>=　0);
}
String.prototype.camelize=function(){
　　　　　　　　return　this.replace(/\-(\w)/ig,　
　　　　　　　　function(B,　A)　{
　　　　　　　　　　　　return　A.toUpperCase();
　　　　　　　　});
}
var　css={
　　　　getStyle:function(elem,styles){
　　　　　　　　var　value,
　　　　　　　　　　　　elem=document.getElementById(elem);
　　　　　　　　if(styles　==　"float"){
　　　　　　　　　　　　　document.defaultView　?　styles　=　'float'　/*cssFloat*/　:　styles='styleFloat';
　　　　　　　　}
　　　　　　　　value=elem.style[styles]　||　elem.style[styles.camelize()];
　　　　　　　　if(!value){
　　　　　　　　　　　　　if　(document.defaultView　&&　document.defaultView.getComputedStyle)　{
　　　　　　　　　　　　　　　　var　_css=document.defaultView.getComputedStyle(elem,　null);
　　　　　　　　　　　　　　　　value=　_css　?　_css.getPropertyValue(styles)　:　null;
　　　　　　　　　　　　　}else{
　　　　　　　　　　　　　　　　if　(elem.currentStyle){
　　　　　　　　　　　　　　　　　　　　value　=　elem.currentStyle[styles.camelize()];
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　if(value=="auto"　&&　["width","height"].contains(styles)　&&　elem.style.display!="none"){
　　　　　　　　　　　　value=elem["offset"+styles.capitalize()]+"px";
　　　　　　　　}
　　　　　　　　if(styles　==　"opacity"){
　　　　　　　　　　　　try　{
　　　　　　　　　　　　　　　　value　=　elem.filters['DXImageTransform.Microsoft.Alpha'].opacity;
　　　　　　　　　　　　　　　　value　=value/100;
　　　　　　　　　　　　}catch(e)　{
　　　　　　　　　　　　　　　　try　{
　　　　　　　　　　　　　　　　　　　　value　=　elem.filters('alpha').opacity;
　　　　　　　　　　　　　　　　}　catch(err){}
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　}
　　　　　　　　return　value=="auto"　?　null　:value;
　　　　}
}　
css.getStyle("flower","width");　//100px;
css.getStyle("flower","font-size");//12px;
css.getStyle("flower","float");//left
css.getStyle("flower","opacity");//0.5