十万火急！jquery回显点击对象的css代码到textarea！！

 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>test </title>
 <style type="text/css">#square {  
 width: 100px;                        
 height: 100px;                       
 background: blue;                    
} #parallelogram{
   width:100px;
   height:70px;
   background:blue;
   -webkit-transform:skew(20deg);
   -moz-transform:skew(20deg);
   -o-transform:skew(20deg);
   transform:skew(20deg);
}#parallelogram2{
   width:100px;
   height:70px;
   background:blue;
   -webkit-transform:skew(-20deg);
   -moz-transform:skew(-20deg);
   -o-transform:skew(-20deg);
   transform:skew(-20deg);
}
    
    </style>
    
</head>
<body>
<div id="wraper">
    <div class="main">
     <ul>
         <li><div id ="square"class ="box">parallelogram</div></li>
         <li><div id ="parallelogram"class ="box">parallelogram</div></li>
         <li><div id ="parallelogram2"class ="box">parallelogram2</div></li>
     </ul>
    </div>
<textarea name="show" id="show" cols="30" rows="10"></textarea>
<script type="text/javascript" src=" http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(".box").click(function(){
   var id = $(this).parents().attr('id');
   var cssrules = document.styleSheets[0].rules["id"].style.cssText;
   $("#show").html("cssrules"); });
</script>
</html>
</body>点击.box 时，在 textarea 中显示其 id ="square" （……）的css代码？外链css呢？

解决方案 »

  1.   


    $(".box").click(function(){ 
    var ss = document.styleSheets[0]; 
        var rules = ss.rules || ss.cssRules;

        var rule = rules[$(this).parent().index()];
    $("#show").html(rule.style.cssText.toLowerCase()); 
      }); 参考：http://www.cnblogs.com/jikey/archive/2011/06/15/2082171.html
      

  2.   

    注意！！！obj.style方法，这个方法只能JS只能获取写在html标签中的写在style属性中的值（style="..."）
    当然，cssText属性也是
      

  3.   

    document.styleSheets[0] 返回的是一个 cssstylesheet对象api看下面http://www.w3.org/2003/01/dom2-javadoc/org/w3c/dom/css/CSSStyleSheet.html关注cssstylesheet对象的  CSSRuleList这个属性
     可能不是所有浏览器支持
      

  4.   

       <script   type= "text/javascript ">
    window.onload=function(){
       document.getElementById("square").style.cssText="width:100px;height:100px; background:blue; ";
    $(".box").click(function(){ 
    console.log(this.style.cssText);
        $("#show").text(this.style.cssText); 
      }); } 
    </script>
      

  5.   

    还有楼主注意不要大量的使用空格，否则css属性都没法应用
    比如：
    class   = "box "
    你说到底是box 还是box+空格 呢？