分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何使用jQuery获取实际的CSS值？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在使用COntenteditable = true来调整几个DIV的高度,以便在IE Quirksmode中修复盒子模型问题.

DIV的风格是：

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

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

详细说明;在jQuery 1.4.2 .css(“height”)将返回’14px’而jQuery 1.6.2返回’0px’如果元素及其所有祖先是可见的,否则’14px’.

我猜测前者是使用IE Quirksmode盒子模型计算的(14px高度 – 2x 6px填充 – 2x 1px border = 0pX),后者直接从样式表中获取.我想得到前者而不管可见性 – 是否有任何“漂亮”的方式来获得实际的CSS值(“漂亮”意味着没有在document.styleSheets数组中查找它)？

编辑：

首先,我在DIV上忘记了一个重要的样式@L_616_4@：overflow：hidden(现已更正).

另外我认为值得强调的是,这个问题只发生在Quirks Mode中的Internet Explorer中.据我所知,它不是任何其他(当前)浏览器/模式的问题(我没有测试所有,所以不是100％肯定).

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

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：

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

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

.outerHeight(true)对我没用,因为无论盒子模型如何,边距都没有效果.元素可见性使用$(“SELEctor”)进行测试.是(“：visible”).

对,那么如何使用这些数字呢？要修复盒子模型高度,我必须进行以下计算：

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

换句话说,我需要14px的值.有人可能会争辩说,问题的解决方案是在元素可见的同时获取 .outerHeight()的值,同时获取.css(‘height’)的值时(我正在计划进行此操作) ),但实际上并没有回答原来的问题;我如何获得实际的CSS值？

为了完整起见,这里有一个示例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>