How do I get a CSS property value from a style tag?

Question

I have the following code in the of the page (along with other tags) and I want eventually to retrieve the numeric value of "z-index" into a variable:

<style>
.main_style {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:11px;
  color:#CCC;
  text-align:center;
  border:7px solid #333;
  -moz-border-radius:5px /;
  border-radius:5px / 5px;
  background-color:#333;
  z-index:1000;
  width:auto;
  min-width:0;
  max-width:1000px;
  height:auto;
  min-height:0;
  max-height:1000px;
  margin:0;
}
</style>

I thought of the following (with jQuery and Javascript) but I am sure it is not the most efficient way to do this:

var a1=$("style:contains('.main_style')").html();
var a2=+a1.match(/z-index: (\d*?);/i)[1];

Here is its FIDDLE: http://jsfiddle.net/R2S4q/

Any other ideas on what is the best approach?

If your style is applied into a tag element, you can get the value with $(element).css('z-index') — celerno, Jul 24 '14 at 17:41
What about this? [get computed style](http://stackoverflow.com/a/4172920/3862007) — NullPointer, Jul 24 '14 at 17:44
If you are just trying to find the z-index of a preexisting `.main_style` element, you can simply use `$('.main_style').css('z-index')`. If the element does not already exist, it's far less trivial. — Jason, Jul 24 '14 at 17:48
I am the OP: no element using this class exists yet (it will be created later by a script), so the css('z-index') solution cannot be applied (unless we create a hidden element, as mentioned by answers below) — user2078023, Jul 25 '14 at 12:03

Ashok Shah · Accepted Answer · 2014-07-24T18:04:35.200

2

I hope this should help you

<style>
    p {z-index: 99}
</style>

$(document).ready(function() {
    var $p = $("<p></p>").hide().appendTo("body");
    alert($p.css("z-index"));
    $p.remove();
});

You can even get CSS property without adding element to the DOM

$('<p/>').css('z-index')

edited Jul 24 '14 at 18:04

answered Jul 24 '14 at 17:43

Ashok Shah

956
12
39

This outputs `auto` in Chrome as does every answer I tried here (in Chrome). – Bill Criswell Jul 24 '14 at 17:53
1

Ah, needs `position: relative` (or absolute, presumably). http://jsbin.com/wejoriyo/1/edit – Bill Criswell Jul 24 '14 at 17:57

score 1 · Answer 2 · answered Jul 24 '14 at 17:57

document.styleSheets holds an object of all stylesheets in the document.
each stylesheet object has a cssRules property: A read-only, array-like object holding the CSSRule objects that compose the stylesheet
each CSSRule object has a cssText property that is the value of that css rule.

...yeah, better use jQuery...

fehays · Answer 3 · 2014-07-24T18:23:51.613

If you are unable to use a selector like other's have mentioned (e.g. - $('.main_style').css('z-index');), you can use document.styleSheets

This will return an array of CSSStyleSheet objects that you can iterate through. Not sure if this is more efficient and the code is certainly more complex. You may be better off with your solution but here's a fiddle if you want to check it out.

http://jsfiddle.net/fehays/WWxru/1/

var rules = [];
for (var i = 0; i < document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];
    if (sheet.ownerNode.nodeName == 'STYLE') {
        rules.push(sheet.rules);
    }
}
for (var i = 0; i < rules.length; i++) {
    var rule = rules[i];
    for (var j = 0; j < rule.length; j++) {
        if (rule[j].selectorText == '.main_style') {
            $('#test').html(rule[j].style.zIndex);
        }
    }
}

A simple jquery solution like this would work as well:

$('<span />').addClass('main_style')
    .css('position','relative')
    .hide()
    .appendTo('body');

$('#test').html($('.main_style').css('z-index'));

dguay · Answer 4 · 2014-07-24T17:53:52.250

0

You could use jQuery .css() function?

var z_index = $('.your_class').css('z-index')

edited Jul 24 '14 at 17:53

answered Jul 24 '14 at 17:42

dguay

1,635
15
24

I think the OP is asking for the z-index of a class regardless of whether or not the element already exists. – Jason Jul 24 '14 at 17:49
I am the OP: no element using this class exists yet (it will be created later by a script), so the css('z-index') solution cannot be applied (unless we create a hidden element, as mentioned in other answers) – user2078023 Jul 25 '14 at 12:03

How do I get a CSS property value from a style tag?

4 Answers4