Question

我想检测下面定义的html元素的高度。为此，我使用Jquery（下面的示例）。我希望变量x大于40像素，但它始终设置为10.我发现如果我更改元素上的填充，例如从5像素到6，则值x设置为12.这表示只有填充正在退货。这不是我想要看到的行为，我已尝试通过jquery执行此操作的其他变体，结果更加令人困惑。

任何人都可以找到这种情况的原因。谢谢:)）

<section id=\"sophiaHeader\">Show Me Products I\'ll Like<p id=\"disclaimer\" style=\"top:' + disclaimerYPosition +'; right:'+ disclaimerXPosition +' ;\"><img id="sophiaLogo" src="https://d33f10u0pfpplc.cloudfront.net/perun/v1/images/bookmarklet/favicon.ico"></p> </section>

绑定到此元素的CSS是：

#sophiaHeader { 
font-family: Arial, Helvetica, sans-serif;
background-color: #4c3290;
border: 0 none;
margin: 0;  
cursor: pointer;
color: white;
font-size: 15px;    
padding: 5px;
text-align: center; 
text-transform: uppercase;
}

Jquery的

var x = jQuery('#sophiaHeader').outerHeight();

注意：代码会附加到容器中。是上面的代码= sophiaCustomHeaderHTML

jQuery("#widget-container").append(sophiaCustomHeaderHTML)

Answer 1

问题是它被附加到的容器设置为

display:none

因此，高度返回为零。

希望这可以帮助其他人：）

检测元素高度时出现错误行为

1 个答案: