3

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.

emboss
  • 38,880
  • 7
  • 101
  • 108
Terry
  • 127
  • 1
  • 11
  • 1
    Do you want to show the ID or the complete css code of that element? – Dogbert Aug 27 '11 at 08:12
  • Your code is horrible to read. Less whitespace helps! And why is `cssrules` a string if you want to show the contents of the variable? `$(this).parents().attr('id')` is also bad; it not only tries to read an attribute ending with a whitespace but `.parents()` also matches **all** parent elements.... – ThiefMaster Aug 27 '11 at 08:14
  • @caizZZz: I edited the title and description a bit to make your goal a bit clearer. Please feel free to revert if you don't like it. – emboss Aug 27 '11 at 12:07

2 Answers2

1

Working demo - 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?

Then changing your jQuery code to -

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

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

  });
Community
  • 1
  • 1
ipr101
  • 24,096
  • 8
  • 59
  • 61
  • hah, if i click
    .box ,only return the code #parallelogram width:100px; height:70px; background:blue; -webkit-transform:skew(20deg); -moz-transform:skew(20deg); -o-transform:skew(20deg); transform:skew(20deg);
     – Terry Aug 27 '11 at 10:41
0

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.

emboss
  • 38,880
  • 7
  • 101
  • 108