获得样式属性和外联样式-阿里云开发者社区

获得样式属性和外联样式

2017-11-07 949

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

 
 function
  getStyleProperty(obj, property){
     
 var
  ele 
 =
  document.getElementById(obj),
         val 
 =
  
 ''
 ;
     
 //
 console.log(ele.ownerDocument.firstChild.innerHTML);
 
 
     
 if
 (ele.currentStyle){
         val 
 =
  ele.currentStyle[property];
     } 
 else
  
 if
 (ele.ownerDocument.defaultView.getComputedStyle) { 
 //
 找到节点所属的document再找到其所属的window
 
 
         val 
 =
  ele.ownerDocument.defaultView.getComputedStyle(ele, 
 null
 ).getPropertyValue(property);
     } 
     alert(val 
 ||
  
 '
 没有此属性值
 '
 );
     
 //
 return val || '没有此属性值';
 
 
 }
 
 //
 console.log(document.defaultView);
 
 //
 alert(getStyle('wrap', 'height'));
 
 
 function
  getFullStyle(){
     
 var
  ss 
 =
  document.styleSheets[
 0
 ]; 
 //
 获得该文档的样式表，数组元素类型是CSSStyleSheet
 
 
     
 var
  rules 
 =
  ss.cssRules 
 ?
  ss.cssRules : ss.rules; 
 //
 FF是cssRules,IE是rules。rules代表样式表中的规则,类型是CSSRule
 
 
     
 for
 (
 var
  i
 =
 0
 ; i
 <
 rules.length; i
 ++
 ){
         
 var
  rule 
 =
  rules[i];
         alert(rule.selectorText 
 +
  
 '
 {
 '
  
 +
  rule.style.cssText.toLowerCase() 
 +
  
 '
 }
 '
 ); 
 //
 selectorText css选择器的名称
 
 
         
 //
 return rule.selectorText + ':{' + rule.style.cssText.toLowerCase() + '}'; //selectorText css选择器的名称
 
 
     }
 }
 
 //
 getFullStyle(); 

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   

     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
   

     <head> 
   

     <title></title> 
   

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
   

     <style type="text/css"> 
   

     #test-box{margin-bottom:10px;} 
   

     .wrap{width:200px;border:20px solid #ccc;} 
   

     .wrap2{width:180px;height:180px;border:10px solid #efefef;} 
   

     </style> 
   

     </head> 
   

     <body> 
   

     <div id="test-box"> 
   

     <div class="wrap" id="wrap"> 
   

     <div class="wrap2">this is test wrap</div> 
   

     </div> 
   

     </div> 
   

     <input type="button" value="获取 width 的属性值" onclick="getStyleProperty('wrap', 'width')" /> 
   

     <input type="button" value="获取外联全部样式值" onclick="getFullStyle()" /> 
   

     <xmp> 
   

     <style type="text/css"> 
   

     #test-box{margin-bottom:10px;} 
   

     .wrap{width:200px;height:200px;border:20px solid #ccc;} 
   

     .wrap2{width:180px;height:180px;border:10px solid #efefef;} 
   

     </style> 
   

     <div id="box"> 
   

     <div class="wrap" id="wrap"> 
   

     <div class="wrap2">this is test wrap</div> 
   

     </div> 
   

     </div> 
   

     </xmp> 
   

     <script type="text/javascript"> 
   

     function getStyleProperty(obj, property){ 
   

     var ele = document.getElementById(obj), 
   

     val = ''; 
   

     //console.log(ele.ownerDocument.firstChild.innerHTML); 
   

     if(ele.currentStyle){ 
   

     val = ele.currentStyle[property]; 
   

     } else if(ele.ownerDocument.defaultView.getComputedStyle) { //找到节点所属的document再找到其所属的window 
   

     val = ele.ownerDocument.defaultView.getComputedStyle(ele, null).getPropertyValue(property); 
   

}

     alert(val || '没有此属性值'); 
   

     //return val || '没有此属性值'; 
   

}

     //console.log(document.defaultView); 
   

     //alert(getStyle('wrap', 'height')); 
   

     function getFullStyle(){ 
   

     var ss = document.styleSheets[0]; //获得该文档的样式表，数组元素类型是CSSStyleSheet 
   

     var rules = ss.cssRules ? ss.cssRules : ss.rules; //FF是cssRules,IE是rules。rules代表样式表中的规则,类型是CSSRule 
   

     for(var i=0; i<rules.length; i++){ 
   

     var rule = rules[i]; 
   

     alert(rule.selectorText + '{' + rule.style.cssText.toLowerCase() + '}'); //selectorText css选择器的名称 
   

     //return rule.selectorText + ':{' + rule.style.cssText.toLowerCase() + '}'; //selectorText css选择器的名称 
   

}

}

     //getFullStyle(); 
   

     </script> 
   

     </body> 
   

     </html> 
   

本文转自豪情博客园博客，原文链接：http://www.cnblogs.com/jikey/archive/2011/06/15/2082171.html，如需转载请自行联系原作者

获得样式属性和外联样式

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

获得样式属性和外联样式

热门文章

最新文章

相关电子书