javascript jQuery .css 以像素为单位返回 css 属性，而实际上以百分比为单位
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9227184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .css returns back css property in pixels, when its actually in percentages
提问by T.J. Crowder
I'm trying to get the value of the leftproperty (which is in percent) using the .cssmethod in jQuery:
我正在尝试left使用.cssjQuery 中的方法获取属性的值（以百分比为单位）：
var my_value= $("div").css("left");
Problem is, the above returns it in pixles...
问题是，上面以像素形式返回它......
Any idea on how I could get it to return the actualvalue of the property (which is in percentages)?
关于如何让它返回财产的实际价值（以百分比表示）的任何想法？
回答by T.J. Crowder
If you're applying leftinline, you can access it directly from style.left, e.g.:
如果您正在申请left内联，则可以直接从 访问它style.left，例如：
var my_value = $("div")[0].style.left;
For me, on Firefox, IE, and Opera, that returns the percentage value where cssreturns the number of pixels. (On Chrome, I get the percentage either way.)
对我来说，在 Firefox、IE 和 Opera 上，它返回百分比值，其中css返回像素数。（在 Chrome 上，无论哪种方式我都会得到百分比。）
If you're applying leftvia a stylesheet, I don't believe there's any convenientway to get the information you're looking for. You canget it, but it's really inconvenient: By looking through all of the defined style rules, figuring which ones apply to the element, and parsing the rule text. You can access the stylesheets via document.styleSheets, which is an array of all of the stylesheets for the document. Each style sheet will have an array of rules it defines available as either cssRulesor rules(depending on the browser). Each rule has a cssTextproperty that gives you the text of the rule.
如果您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
});
});
Not easy getting all of the CSS rules of specificity and such right, but possible, and not especially difficult for simpler cases.
获得所有特定的 CSS 规则等并不容易，但可能，对于更简单的情况并不是特别困难。
For the inline style stuff, here's a live demo- In the demo, I have an absolutely-positioned divwith leftdefined by an inlinestyle and topdefined by a stylesheet (so notinline).
对于内嵌式的东西，这里有一个现场演示-在演示中，我有一个绝对定位div与left由定义的内嵌风格，top通过一个样式表（这样定义不在线）。
Using Chrome 16:
使用 Chrome 16：
css('left') says: 20%
style.left says: 20%
css('top') says: 10%
style.top says:
Using Firefox 10:
使用 Firefox 10：
css('left') says: 193.2px
style.left says: 20%
css('top') says: 73.5px
style.top says:
Using IE9:
使用 IE9：
css('left') says: 239.8px
style.left says: 20%
css('top') says: 59.3px
style.top says:
The reason style.topis always blank is that styleonly reflects inlinestyles, but I included it for completeness.
style.top总是空白的原因是style它只反映内联样式，但我为了完整性而包含它。
回答by bruchowski
Just had this problem and managed to get it this way:
刚刚遇到这个问题并设法通过这种方式解决了这个问题：
$('#mySelector').get(0).style.width;
returned me '100%'
还我 '100%'
however $('#mySelector').css('width');
然而 $('#mySelector').css('width');
returned me '900px'
还我 '900px'
Hope this helps someone
希望这有助于某人
回答by Ken Sanders
Update: in IE 11, style.left no longer works. If you are trying to access inline style, use the prop() function and then specify the specific attribute you're looking for as an array key:
更新：在 IE 11 中，style.left 不再有效。如果您尝试访问内联样式，请使用 prop() 函数，然后将您要查找的特定属性指定为数组键：
$("selector").prop("style")["left"];
will return the property in pixels
将以像素为单位返回属性
回答by Rory McCrossan
I don't think it's possible to get the width returned to you as a percentage, as the browser does the maths internally, and then only allows access to the resulting px value.
我认为不可能以百分比形式返回给您的宽度，因为浏览器在内部进行数学运算，然后只允许访问生成的 px 值。
You can however work out the percentage once you know the width of the element, and the width of the relevant containing element, like this:
但是，一旦您知道元素的宽度和相关包含元素的宽度，您就可以计算出百分比，如下所示：
var elWidth = $('#myElement').width();
var containerWidth = $('#myContainer').offsetParent().width();
var elWidthPercent = 100 * elWidth / containerWidth;
