如何使用 jQuery 获取实际的 CSS 值?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6732982/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 21:19:00  来源:igfitidea点击:

How to get actual CSS value with jQuery?

jquerycss

提问by Woodgnome

I am adjusting the height of a couple of DIVs with contenteditable = trueto fix box model issues when in IE Quirksmode.

我正在调整几个 DIV 的高度,以contenteditable = true在 IE Quirksmode 中修复框模型问题。

The style of the DIVs are:

DIV 的样式是:

height: 14px;
padding: 6px;
border: 1px solid black;
overflow: hidden;

So far I've been fetching the CSS height value using $("selector").css("height")and used that value for further calculations, but recently updated my jQuery library to the newest version and this method is now broken.

到目前为止,我一直在使用 CSS 高度值获取$("selector").css("height")并使用该值进行进一步计算,但最近将我的 jQuery 库更新为最新版本,但此方法现已失效。

To elaborate; in jQuery 1.4.2 .css("height")would return '14px' whereas jQuery 1.6.2 returns '0px' if the element and all of its ancestors are visible and otherwise '14px'.

详细说明; 在 jQuery 1.4.2.css("height")中将返回 '14px' 而 jQuery 1.6.2 返回 '0px' 如果元素及其所有祖先都可见,否则返回 '14px'。

I'm guessing the former is calculated using IE Quirksmode box model (14px height - 2x 6px padding - 2x 1px border = 0px) and the latter is grabbed directly from the stylesheet. I would like to get the former regardless of visibility - is there any "pretty" way to get the actual CSS value ("pretty" meaning not looking it up in the document.styleSheets array)?

我猜前者是使用 IE Quirksmode 框模型(14px 高度 - 2x 6px 填充 - 2x 1px 边框 = 0px)计算的,后者是直接从样式表中获取的。无论可见性如何,我都想获得前者 - 是否有任何“漂亮”的方式来获得实际的 CSS 值(“漂亮”意味着不在 document.styleSheets 数组中查找它)?

Edit:

编辑:

First off, I forgot an important style property on the DIVs: overflow: hidden(now corrected).

首先,我忘记了 DIV 上的一个重要样式属性:(overflow: hidden现已更正)。

Also I think it is worth to emphasize, this problem only occurs in Internet Explorer while in Quirks Mode. As far as I am aware it is not a problem in any other (current) browser/mode (I haven't tested all, so not 100% sure).

另外我认为值得强调的是,此问题仅在 Internet Explorer 中出现在 Quirks Mode 中。据我所知,这在任何其他(当前)浏览器/模式中都不是问题(我还没有测试所有,所以不是 100% 确定)。

To further elaborate on the problem (and answer some suggestions on possible solutions) I ran a little test on the fields and the values returned by different functions in jQuery:

为了进一步详细说明问题(并回答有关可能解决方案的一些建议),我对 jQuery 中不同函数返回的字段和值进行了一些测试:

jQuery 1.4.2:

jQuery 1.4.2:

Element visible: true
.css('height'): 14px
.height(): 0
.outerHeight(): 14

Element visible: false
.css('height'): 14px
.height(): 0
.outerHeight(): 0

jQuery 1.6.2:

jQuery 1.6.2:

Element visible: true
.css('height'): 0
.height(): 0
.outerHeight(): 14

Element visible: false
.css('height'): 14px
.height(): 14
.outerHeight(): 28

.outerHeight(true)is of no use to me, as the margin has no effect regardless of box model. Element visibility was tested using $("selector").is(":visible").

.outerHeight(true)对我来说没有用,因为无论盒子模型如何,边距都没有影响。元素可见性已使用$("selector").is(":visible").

Right, so how to use those numbers? To fix the box model height I have to do the following calculation:

是的,那么如何使用这些数字呢?要修复盒模型高度,我必须进行以下计算:

newHeight = oldHeight + borderWidth (top & bottom) + padding (top & bottom)

In other words, I need the 14px value. One could argue that the solution to the problem is to grab the value of .outerHeight()when the element is visible while grabbing the value of .css('height')when it is not (which is what I am currently planning on doing), but that does not actually answer the original question; how do I get the actual CSS value?

换句话说,我需要 14px 值。有人可能会争辩说,该问题的解决方案是获取.outerHeight()元素何时可见的值,同时获取元素不可见时的值.css('height')(这是我目前计划做的),但这实际上并没有回答原始问题; 如何获得实际的 CSS 值?

For the sake of completeness, here is an example HTML/script that will replicate my numbers from the test (I did not do the actual test on this, but the end result is the same - also remember to set IE to Quirksmode before testing):

为了完整起见,这里是一个示例 HTML/脚本,它将从测试中复制我的数字(我没有对此进行实际测试,但最终结果是相同的 - 还记得在测试前将 IE 设置为 Quirksmode) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="http://code.jquery.com/jquery-1.6.2.js" type="text/javascript"></script>
        <style>
            .input {
                height: 14px;
                padding: 6px 8px;
                border: 1px solid black;
                overflow: hidden;
            }
            .hidden { display: none; }
        </style>
    </head>
    <body>
        <div><div class="input" contenteditable="true">test</div></div>
        <div class="hidden"><div class="input" contenteditable="true">test</div></div>
        <script type="text/javascript">
            $(document).ready(function(){
                var t = "";
                $(".input").each(function(){
                    t+= "visible: " + $(this).is(":visible") +"\n"  +
                            ".css('height'): " + $(this).css("height")+ "\n" +
                            ".height(): " + $(this).height()+ "\n" +
                            ".outerHeight(): " + $(this).outerHeight()+ "\n\n";

                });
                alert(t);
            });
        </script>
    </body>
</html>

回答by ChristopheCVB

Does :

做 :

$("selector").height();

or

或者

$("selector").outerHeight();

fix your problem ?

解决你的问题?

回答by Adam Hopkinson

You can use .height()to get the actual height. Additionally, you can use .innerHeight()to get the element height including padding and .outerHeight()to get the height, padding, border and (optionally) margin.

您可以使用.height()来获取实际高度。此外,您可以使用.innerHeight()获取元素高度(包括填充)以及.outerHeight()获取高度、填充、边框和(可选)边距。