Question

我用CSS创建了几个形状，每个形状都包含在一个带有id的元素中，例如id =“square”。我想要的是以下内容：如果我点击形状，我想在textarea中显示其CSS规则。

这是我的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>

我的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);
}

我目前拥有的jQuery代码：

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

另见this jsFiddle。这是我another one的所有形状。

Answer 1

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

我是通过使用此问题中定义的函数 - Can jQuery get all CSS styles associated with an element?

来完成的

然后将您的jQuery代码更改为 -

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

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

  });

Answer 2

空白问题实际上阻止了它的工作 - $（“＃show”）和$（“＃show”）之间存在差异，所以你应该对此更加小心。我修正了标记：

<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>

要获取内联样式表，您应该遍历document.styleSheets并抓住具有值href的{{1}}属性的那个 - 其他属于外部样式表。由于所有元素都由id引用，相应的CSS规则以＃开头，我们可以通过测试规则的null属性是否以“＃”开头来获取与形状对应的规则：

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); });的值，而不是textarea的值。

Here是一个说明它的小说。

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

2 个答案: