jQuery 中的宽度、内部宽度和外部宽度、高度、内部高度和外部高度有什么区别

IT技术 javascript jquery css dom styles
2021-01-29 08:07:37

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

<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>

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

谢谢。

6个回答

你看到这些例子了吗?看起来和你的问题很相似。

处理宽度和高度

在此处输入图片说明

jQuery - 尺寸

jQuery:高度、宽度、内部和外部

最好的答案
2021-03-14 08:07:37
innerWidth小于内在width,去图。
2021-03-23 08:07:37
我刚刚在下面发布了一个答案,因为现在我看到这两个选项之间存在不同的行为,这不是您的描述推断出来的
2021-04-10 08:07:37

正如评论中提到的,文档会准确地告诉您区别是什么。但总而言之:

  • innerWidth / innerHeight - 包括填充但不包括边框
  • 外宽度/外高度 - 包括填充、边框和可选的边距
  • height / width - 元素高度(无填充、无边距、无边框)
  • 宽度 = 获取宽度,

  • innerWidth = 获取宽度 + 填充,

  • externalWidth = 获取宽度 + 填充 + 边框和可选的边距

如果你想测试添加一些填充、边距、边框到你的 .test 类,然后再试一次。

还阅读了jQuery 文档......你需要的一切都在那里

似乎有必要讲述值分配并比较 jq 中“宽度”参数的含义:(假设 new_value 以 px 单位定义)

jqElement.css('width',new_value);
jqElement.css({'width: <new_value>;'});
getElementById('element').style.width= new_value;

这三个指令不给相同的效果: 因为第一jquery的指令定义的innerwidth的元件,而不是“宽度”的。这很棘手。

要获得相同的效果,您必须先计算填充(假设 var 是 pads),jquery 获得与纯 js(或 css 参数 'width')相同结果的正确指令是:

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

我们还可以注意到,对于:

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

w1 是内宽,w2 是宽度(css 属性含义)的区别,JQ API 文档中没有记载。

最好的祝福

高音


注意:在我看来,这可以被认为是一个错误 JQ 1.12.4 出去的方法应该是明确地引入 .css('parameter', value) 的可接受参数列表,因为 'parameters' 背后有各种含义接受,有兴趣但必须始终明确。对于这种情况:“innerwidth”与“width”的含义不同。我们可以在 .width(value) 的文档中找到这个问题的踪迹:“请注意,在现代浏览器中,CSS 宽度属性不包括填充”

添加了扭曲:.css('width')与 时相同.outerWidth()(即,它包括边框和填充)box-sizing: border-box;
2021-04-10 08:07:37

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

这是,如果窗口是900px并且内容是1200px(并且有滚动)

  • innerWidth 给我 1200px
  • outerWidth 给我 900px

在我眼里完全出乎意料

*就我而言,内容包含在 <iframe>