单击该元素时，在textarea中显示具有id的元素的CSS规则

Question

I have created several shapes with CSS, each shape is contained in an element with an id, for example id="square". 我用CSS创建了几个形状，每个形状都包含在一个带有id的元素中，例如id =“square”。 What I want is the following: If I click on the shape, I would like to display its CSS rules in a textarea . 我想要的是以下内容：如果我点击形状，我想在textarea显示其CSS规则。

Here's my HTML: 这是我的HTML：

<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>
<textarea name="show" id="show" cols="30" rows="10"></textarea>

And my CSS: 我的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);
}

And the jQuery code I currently have: 我目前拥有的jQuery代码：

$(".box").click(function () {
  var id = $(this).parents().attr('id');
  var cssrules=document.styleSheets[0].rules["id"].style.cssText;
  $("#show").html("cssrules");
});

Also see this jsFiddle . 也看到这个jsFiddle 。 Here's another one with all my shapes. 这是我的所有形状的另一个。

Answer 1

Working demo - http://jsfiddle.net/fHvpL/ 工作演示 - http://jsfiddle.net/fHvpL/

I did this by using the functions defined in this question - Can jQuery get all CSS styles associated with an element? 我通过使用这个问题中定义的函数来做到这一点 - jQuery可以获得与元素相关的所有CSS样式吗？

Then changing your jQuery code to - 然后将您的jQuery代码更改为 -

$(".box").click(function(){

      var style = $.param(css($(this))).replace(/&/g,';\n');
      $("#show").val(style); 

  });

Answer 2

The whitespace issues are actually preventing this from working at all - there is a difference between $("#show") and $("#show "), so you should really be more careful with this. 空白问题实际上阻止了它的工作 - $（“＃show”）和$（“＃show”）之间存在差异，所以你应该对此更加小心。 I fixed the markup: 我修正了标记：

<body> 
  <div class="main"> 
    <ul> 
      <li><div id="square" class="box">parallelogram0</div></li> 
      <li><div id="parallelogram" class="box">parallelogram1</div></li> 
      <li><div id="parallelogram2" class="box">parallelogram2</div></li> 
    </ul> 
  </div> 
  <textarea name="show" id="show " cols="30" rows="10"></textarea>

To get your inline style sheet, you should iterate over document.styleSheets and grab the one that has an href attribute with value null - the other ones are external style sheets. 要获取内联样式表，您应该遍历document.styleSheets并获取具有值为null的href属性的那个 - 其他是外部样式表。 Since all your elements are referenced by id and the corresponding CSS rules start with # we can get the rule corresponding to a shape by testing whether the selectorText attribute of a rule starts with "#": 由于所有元素都由id引用，并且相应的CSS规则以＃开头，因此我们可以通过测试规则的selectorText属性是否以“＃”开头来获取与形状对应的规则：

for (var i=0; i<document.styleSheets.length; i++) {
    if (document.styleSheets[i].href === null)
        var sheet = document.styleSheets[i];
}

$(".box").click(function() {
    var id = $(this).attr('id');
    var rules = sheet.cssRules || sheet.rules;
    for (var i=0; i<rules.length; i++) {
        if (rules[i].selectorText.indexOf("#"+id) == 0) {
            var rule = rules[i];
            break;
        }
    }
    $("#show").val(rule.cssText);
});

You can access the style sheets only by index, they're held in an array. 您只能通过索引访问样式表，它们保存在数组中。 Finally, you have to set the value of the textarea , not its html . 最后，你必须设置textarea的值，而不是它的html 。

Here is a jsfiddle illustrating it. 这是一个说明它的jsfiddle。

单击该元素时，在textarea中显示具有id的元素的CSS规则

问题描述

2 个解决方案

解决方案1
1 2011-08-27 08:32:39

解决方案2
0 已采纳 2011-08-27 09:07:21

单击该元素时，在textarea中显示具有id的元素的CSS规则

问题描述

2 个解决方案

解决方案1 1 2011-08-27 08:32:39

解决方案2 0 已采纳 2011-08-27 09:07:21

解决方案1
1 2011-08-27 08:32:39

解决方案2
0 已采纳 2011-08-27 09:07:21