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

获得样式属性和外联样式

2017-11-07 940

版权

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

简介：

 
 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，如需转载请自行联系原作者

获得样式属性和外联样式

热门文章

最新文章

相关电子书

相关实验场景