Home/ Questions/Q 6363301
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T00:01:20+00:00

I have created several shapes with CSS, each shape is contained in an element

  • 0

I have created several shapes with CSS, each shape is contained in an element with an id, for example 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.

Here’s my 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:

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

$(".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. Here’s another one with all my shapes.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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. 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. 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 “#”:

    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.

    Here is a jsfiddle illustrating it.

    • 0