Question

我在页面中有以下代码（以及其他标签），我希望最终将“z-index”的数值检索到变量中：

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

我想到了以下（使用jQuery和Javascript），但我确信不是最有效的方法：

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

这是它的FIDDLE：http://jsfiddle.net/R2S4q/

关于什么是最佳方法的任何其他想法？

Answer 1

我希望这可以帮到你

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

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

您甚至可以在不向DOM添加元素的情况下获取CSS属性

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

Answer 2

document.styleSheets包含文档中所有样式表的对象。
每个样式表对象都有一个cssRules属性：一个只读的，类似于数组的对象，其中包含组成样式表的CSSRule对象
每个CSSRule对象都有cssText属性，该属性是该css规则的值。

...是的，最好使用jQuery ......

Answer 3

如果您无法像其他人提到的那样使用选择器（例如 - $('.main_style').css('z-index');），则可以使用document.styleSheets

这将返回一个可以迭代的CSSStyleSheet对象数组。不确定这是否更有效，代码肯定更复杂。你可能会更好地使用你的解决方案，但如果你想查看它，这里就是小提琴。

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

像这样的简单jquery解决方案也可以使用：

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

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

Answer 4

您可以使用jQuery .css() function吗？

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

如何从样式标记中获取CSS属性值？

4 个答案: