Javascript 单击某个元素时，在文本区域中显示该元素id的CSS规则_Javascript_Jquery_Css

Javascript 单击某个元素时，在文本区域中显示该元素id的CSS规则

javascript jquery css

Javascript 单击某个元素时，在文本区域中显示该元素id的CSS规则,javascript,jquery,css,Javascript,Jquery,Css,我用CSS创建了几个形状，每个形状都包含在一个id为的元素中，例如id=“square”。我想要的是：如果我点击这个形状，我想在textarea中显示它的CSS规则这是我的HTML： <ul> <li><div id="square" class="box"> parallelogram </div></li> <li><div id="parallelogram" class="box"> p

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

以及我目前拥有的jQuery代码：

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

另见。这是我所有的形状。

工作演示-

我是通过使用问题中定义的函数来实现的-

然后将jQuery代码更改为-

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

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

  });

空白问题实际上阻止了这一点——美元（“#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>

您只能通过索引访问样式表，它们保存在一个数组中。最后，您必须设置

textarea

的值，而不是它的

html

是一个JSFIDLE来说明它。

您想显示该元素的ID还是完整的css代码？您的代码读起来很糟糕。减少空白有帮助！如果要显示变量的内容，为什么

cssrules

是一个字符串<代码>$（this）.parents（）.attr（'id'）也不好；它不仅尝试读取以空格结尾的属性，而且

.parents（）

还匹配所有父元素。…@caizzz:我对标题和描述进行了一些编辑，以使您的目标更清晰。如果您不喜欢，请随时回复。哈哈，如果我单击.box，只返回代码#平行四边形宽度：100px；高度：70像素；背景：蓝色-webkit变换：倾斜（20度）-moz变换：倾斜（20度）-o变换：倾斜（20度）；变换：倾斜（20度）；我测试了它，但它不工作。这是抱怨的代码，因为您没有使用我编写的代码；）试试看。如果我使用，如何投诉。？投票需要15个声誉，但我只有11个声誉对不起，我是新的！！现在可以了

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

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