Question

为什么我的函数使用javascript无法使用div的完整高度？

我尝试了我的代码但没有工作，我该怎么做？

<script type="text/javascript">
$(document).ready(function(){
    var elmHeight, elmMargin;
    if (document.all) { // IE
        elmHeight = document.getElementById(divxx).currentStyle.height;
        elmMargin = parseInt(document.getElementById(divxx).currentStyle.marginTop, 10) + parseInt(document.getElementById(divxx).currentStyle.marginBottom, 10) + "px";
    }
    else { // Mozilla
        elmHeight = document.defaultView.getComputedStyle(document.getElementById(divxx), '').getPropertyValue('height');
        elmMargin = parseInt(document.defaultView.getComputedStyle(document.getElementById(divxx), '').getPropertyValue('margin-top')) + parseInt(document.defaultView.getComputedStyle(document.getElementById(divxx), '').getPropertyValue('margin-bottom')) + "px";
    }
    alert("Height=" + elmHeight + "\nMargin=" + elmMargin);
});
</script>

<style type="text/css">
#divxx {
    height:20px;
    margin:7px;
} 
</style>

<div id="divxx">TEST AREA</div>

Answer 1

您已经说过它没有显示警报，这几乎肯定意味着某处存在语法或运行时错误。您的浏览器的调试器可以告诉您在哪里。

你也在努力工作。 :-)因为你已经在使用jQuery，为什么不... use jQuery？

var eleHeight = $("#divxx").outerHeight();

如果您确实需要某些其他原因的保证金信息：

var $div = $("#divxx");
var eleHeight = $div.outerHeight();
var eleMargin =
    parseInt($div.css("margin-top"), 10) +
    parseInt($div.css("margin-bottom"), 10);

jQuery's .css为您处理整个.currentStyle与getComputedStyle的事情。

直播示例：

var $div = $("#divxx");
var eleHeight = $div.outerHeight();
var eleMargin =
  parseInt($div.css("margin-top"), 10) +
  parseInt($div.css("margin-bottom"), 10);
alert("eleHeight = " + eleHeight + ", eleMargin = " + eleMargin);

#divxx {
  height: 20px;
  margin: 7px;
}

<div id="divxx">TEST AREA</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

为什么我的函数使用javascript无法使用div的完整高度？

1 个答案: