如何从样式标签中获取 CSS 属性值？答案

【问题标题】：How do I get a CSS property value from a style tag?如何从样式标签中获取 CSS 属性值？
【发布时间】：2014-07-24 17:38:32
【问题描述】：

我在页面中有以下代码（以及其他标签），我希望最终将“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/

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

【问题讨论】：

如果你的样式应用于标签元素，你可以通过 $(element).css('z-index') 获取值
这个怎么样？ get computed style
如果你只是想找到一个预先存在的.main_style元素的z-index，你可以简单地使用$('.main_style').css('z-index')。如果该元素尚不存在，那么它就不那么简单了。
我是 OP：尚不存在使用此类的元素（稍后将由脚本创建），因此无法应用 css('z-index') 解决方案（除非我们创建一个隐藏元素，如下面的答案所述）

标签： javascript jquery html css

【解决方案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')

【讨论】：

这会在 Chrome 中输出auto，就像我在此处尝试的每个答案（在 Chrome 中）一样。
啊，需要position: relative（或者绝对的，大概）。 jsbin.com/wejoriyo/1/edit

【解决方案2】：

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

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

【讨论】：

【解决方案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'));

【讨论】：

【解决方案4】：

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

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

【讨论】：

我认为无论元素是否已经存在，OP 都在要求一个类的 z-index。
我是 OP：尚不存在使用此类的元素（稍后将由脚本创建），因此无法应用 css('z-index') 解决方案（除非我们创建一个隐藏元素，如其他答案所述）