Question

我写了一些例子来看看有什么区别，但是它们显示了宽度和高度相同的结果。

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var div = $('.test');
                var width = div.width(); // 200 px
                var innerWidth = div.innerWidth(); // 200px
                var outerWidth = div.outerWidth(); // 200px

                var height = div.height(); // 150 px
                var innerHeight = div.innerHeight(); // 150 px
                var outerHeight = div.outerHeight(); // 150 px
            });

        </script>
        <style type="text/css">
            .test
            {
                width: 200px;
                height: 150px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

在此示例中，您可以看到它们输出相同的结果。如果有人知道有什么区别，请告诉我适当的答案。

感谢。

Answer 1

你看到这些例子了吗？看起来与您的问题类似。

Working with widths and heights

enter image description here

jQuery - Dimensions

jQuery: height, width, inner and outer

Answer 2

如评论中所述，the documentation会告诉您确切的差异。但总结一下：

innerWidth / innerHeight - 包括填充但不包含边框
outerWidth / outerHeight - 包括填充，边框和可选边距
高度/宽度 - 元素高度（无填充，无边距，无边框）

Answer 3

width =获取宽度，
innerWidth =获取宽度+填充，
outerWidth =获取宽度+填充+边框以及可选的边距

如果你想测试为你的.test类添加一些填充，边距，边框，然后重试。

还可以在 jQuery docs 中阅读...你需要的一切都在那里

Answer 4

似乎有必要告诉值分配并比较jq中“width”参数的含义：（假设new_value以px为单位定义）

jqElement.css('width',new_value+pads);

这三条说明不会产生同样的效果： 因为第一个jquery指令定义了元素的 innerwidth 而不是“width”。这很棘手。

为了获得相同的效果，你必须先计算填充（假设var是pad），jquery获得与纯js（或css参数'width'）相同结果的正确指令是：

var w1 = jqElement.css('width');
var w2 = jqelement.width();

我们还可以注意到：

Caused by: java.lang.AbstractMethodError: org.apache.logging.slf4j.SLF4JLoggerContextFactory.getContext(Ljava/lang/String;Ljava/lang/ClassLoader;Ljava/lang/Object;Z)Lorg/apache/logging/log4j/spi/LoggerContext;
at org.apache.logging.log4j.LogManager.getContext(LogManager.java:175)
at org.apache.logging.log4j.LogManager.getLogger(LogManager.java:426)
at org.elasticsearch.common.logging.ESLoggerFactory.getLogger(ESLoggerFactory.java:49)
at org.elasticsearch.common.logging.Loggers.getLogger(Loggers.java:105)
at org.elasticsearch.common.logging.Loggers.getLogger(Loggers.java:72)
at org.elasticsearch.common.component.AbstractComponent.<init>(AbstractComponent.java:37)
at org.elasticsearch.plugins.PluginsService.<init>(PluginsService.java:98)
at org.elasticsearch.client.transport.TransportClient.newPluginService(TransportClient.java:99)
at org.elasticsearch.client.transport.TransportClient.buildTemplate(TransportClient.java:124)
at org.elasticsearch.client.transport.TransportClient.<init>(TransportClient.java:258)
at org.elasticsearch.transport.client.PreBuiltTransportClient.<init>(PreBuiltTransportClient.java:125)
at org.elasticsearch.transport.client.PreBuiltTransportClient.<init>(PreBuiltTransportClient.java:111)
at org.elasticsearch.transport.client.PreBuiltTransportClient.<init>(PreBuiltTransportClient.java:101)

w1是内部宽度，而 w2是宽度（css属性含义）未记录在JQ API文档中的差异。

祝你好运

Trebly

注意：在我看来，这可以被视为一个错误JQ 1.12.4 出去的方法应该是明确地引入.css（'参数'，值）的可接受参数列表，因为接受的'参数'背后有各种含义，它们有兴趣，但必须始终清楚。对于这种情况：'innerwidth'与'width'不同。我们可以通过以下句子找到.width（value）文档中的这个问题的跟踪：“请注意，在现代浏览器中，CSS width属性不包括填充”

Answer 5

同意以上给出的所有答案。只是为了增加窗口或浏览器的前景，innerWidth/ innerheight仅包括窗口内容区域，没有其他内容，但是

outerWidth/ outerHeight包括Windows内容区域，此外还包括工具栏，滚动条等内容，这些值将始终等于或大于innerWidth / innerHeight值。

希望它能提供更多帮助...

Answer 6

我现在看到的是innerWidth包含了全部内容

也就是说，如果窗口是900px，内容是1200px（并且有滚动条）

innerWidth给了我1200px
outerWidth给了我900px

在我眼中完全出乎意料

*对于我来说，内容包含在<iframe>

中

jQuery中width，innerWidth和outerWidth，height，innerHeight和outerHeight之间有什么区别

6 个答案: