如何使用jQuery获得CSS的实际值? [英] How to get actual CSS value with jQuery?
问题描述
我正在使用contenteditable = true调整几个DIV的高度，以解决在IE Quirksmode中出现的盒子模型问题.
I am adjusting the height of a couple of DIVs with contenteditable = true to fix box model issues when in IE Quirksmode.
DIV的样式为:
height: 14px;
padding: 6px;
border: 1px solid black;
overflow: hidden;
到目前为止，我一直在使用$("selector").css("height")获取CSS高度值，并将该值用于进一步的计算，但是最近我将jQuery库更新为最新版本，并且此方法现已失效.
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.
详细说明；在jQuery 1.4.2中，.css("height")将返回'14px'，而在jQuery 1.6.2中，如果元素及其所有祖先可见，则返回'0px'.否则，返回'14px'.
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'.
我猜测前者是使用IE Quirksmode框模型(14像素高度-2x 6像素填充-2x 1像素边框= 0像素)计算的，而后者是直接从样式表中获取的.我想获得前者而不考虑可见性-是否有任何漂亮"的方法来获取实际CSS值(漂亮"是指不在document.styleSheets数组中查找它)?
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)?
首先，我忘记了DIV上的重要样式属性:overflow: hidden(现已更正).
First off, I forgot an important style property on the DIVs: overflow: hidden (now corrected).
此外，我认为值得强调的是，此问题仅在Quirks模式下在Internet Explorer中发生.据我所知，这在任何其他(当前)浏览器/模式下都不是问题(我还没有测试全部，所以不能100％确定).
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).
为了进一步阐述这个问题(并回答一些可能的解决方案的建议)，我对jQuery中的字段和由不同函数返回的值进行了一些测试:
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 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)对我来说是没有用的，因为无论盒子型号如何，边距都没有影响.使用$("selector").is(":visible")测试了元素可见性.
.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").
对，那么如何使用这些数字?要固定盒子模型的高度，我必须进行以下计算:
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)
换句话说，我需要14px的值.有人可能会争辩说，解决该问题的方法是在元素可见时获取.outerHeight()的值，而在元素不可见时获取.css('height')的值(这是我目前正在计划的工作)，但是确实可以实际上没有回答原始问题；如何获得CSS的实际值?
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?
为了完整起见，下面是一个示例HTML/script，它将复制测试中的数字(我并未对此进行实际测试，但最终结果是相同的-还记得将IE设置为Quirksmode测试之前):
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):
<!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>
推荐答案
是:
$("selector").height();
或
$("selector").outerHeight();
解决您的问题吗?
这篇关于如何使用jQuery获得CSS的实际值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
