我正在尝试使用 jQuery 中的 .css
方法获取 left
属性的值(以百分比表示):
var my_value= $("div").css("left");
问题是,上面以像素为单位返回它...
关于如何让它返回属性的实际值(以百分比表示)的任何想法?
最佳答案
如果你在内联应用 left
,你可以直接从 style.left
访问它,例如:
var my_value = $("div")[0].style.left;
对我来说,在 Firefox、IE 和 Opera 上,它返回百分比值,而 css
返回像素数。 (在 Chrome 上,我可以通过任何一种方式获得百分比。)
如果您通过样式表应用 left
,我认为没有任何方便的方法来获取您正在寻找的信息。您可以得到它,但这确实很不方便:通过查看所有已定义的样式规则,确定哪些适用于元素,然后解析规则文本。您可以通过 document.styleSheets
访问样式表,它是文档所有样式表的数组。每个样式表都有一组规则,它定义为 cssRules
或 rules
(取决于浏览器)。每个规则都有一个 cssText
属性,为您提供规则的文本。
$.each(document.styleSheets, function(sheetIndex, sheet) {
$.each(sheet.cssRules || sheet.rules, function(ruleIndex, rule) {
var ruleText = rule.cssText;
// Figure out if the rule applies, and parse out the value
});
});
获得所有 CSS 规则的特殊性和正确性并不容易,但有可能,而且对于更简单的情况也不是特别困难。
对于内联样式,here's a live demo - 在演示中,我有一个绝对定位的 div
,其中 left
由 inline 样式定义,top
定义通过样式表(因此不是内联)。
使用 Chrome 16:
css('left') says: 20% style.left says: 20% css('top') says: 10% style.top says:
使用 Firefox 10:
css('left') says: 193.2px style.left says: 20% css('top') says: 73.5px style.top says:
使用 IE9:
css('left') says: 239.8px style.left says: 20% css('top') says: 59.3px style.top says:
style.top
始终为空白的原因是 style
仅反射(reflect)内联 样式,但为了完整起见,我将其包括在内。
关于javascript - jQuery .css 以像素为单位返回 css 属性,而实际上以百分比为单位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9227184/