![](/img/trans.png)
[英]How do I get a style property value from an SVG element that is animated using transform?
[英]How do I get a CSS property value from a style tag?
我在页面中有以下代码(以及其他标签),我希望最终将“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/
关于什么是最佳方法的任何其他想法?
我希望这对你有帮助
<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')
document.styleSheets
包含document.styleSheets
中所有样式表的对象。 cssRules
属性:一个只读的,类似于数组的对象,它包含组成样式表的CSSRule对象 CSSRule
对象都有一个cssText
属性,该属性是该css规则的值。 ...是的,更好地使用jQuery ...
如果你不能像其他人提到的那样使用选择器(例如 - $('.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'));
你可以使用jQuery .css()函数吗?
var z_index = $('.your_class').css('z-index')
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.