JQuery 没有得到正确的宽度

JQuery not getting correct width

本文关键字：JQuery      更新时间：2023-09-26

我用这个脚本来获取宽度，然后将其应用于同一个元素：

$(document).ready(function(){                
    $(".equal-height").each(function(){
        var slideSize = $(this).outerWidth();
        console.log(slideSize);
        $(this).css({ "height" : slideSize + "px" });
    });                
});

但是，由于某种原因，有些元素有时无法获得匹配的宽度和高度。正如你在这个小提琴中看到的：https://jsfiddle.net/cpfgtuzo/5/最后一个元素具有正确的尺寸，但其余元素都高于它们的宽度。我试图让它们都是方形的，我也需要支持旧浏览器。

这似乎只是当窗口的大小较小并且四个项目堆叠成 2 列时才是一个问题。

在你对其他答案的评论之后，

我在页面上有许多使用此脚本的元素，并非所有元素的大小都相同（也有较小的正方形集）

和

但是由此产生的盒子并没有变成正方形。如果你检查你的小提琴，盒子太高~10px了

这个解决方案似乎克服了这些问题，让我知道这是否有帮助，工作小提琴

$(document).ready(function () {
    $(".equal-height").each(function () {
        var slideSize = $(this).outerWidth();
        console.log(slideSize);
        $(this).css({ "height": slideSize + "px", "width": slideSize + "px" }); 
        //setting the width along with height
    });                
});

嗯，我认为jQuery在计算每个元素的宽度时有一个错误。

将此 jsfiddle 作为一种解决方法。

// Height = Width
$(document).ready(function() {
  var width = $('.wide-content').width();
  // prevent jQuery from calculating the width of children
  $('.wide-content').hide();
  // $(".equal-height").width() is now 50
  var slideSize = $(".equal-height").width() * width / 100;
  $(".equal-height").each(function() {
    $(this).css({
      "height": slideSize + "px"
    });
  });
  $('.wide-content').show();
});

所有元素的高度相同

我只使用第一个框来计算其他元素的高度 - 至少这将确保相同的高度。它也会摆脱那个循环。

$(".equal-height").css({"height" : $(".equal-height").eq(0).outerWidth()});

一条线统治一切

但是，由于这不符合范围..

制作不同大小元素的正方形

经过一番混乱之后，很明显，只有在您开始篡改高度之后，宽度才会返回错误。这可以通过注释掉设置高度的 css-命令并观察输出来轻松测试。

解决方案似乎是设置预定义的高度：

.link-quarters {            
    width: 25%;
    height: 100px;
    float: left;
    ...

这将在所有元素（重要部分）上返回完全相同的宽度，然后您可以以编程方式设置相应的高度而不会出现问题。

不过，舍入

仍然存在一个问题，因为百分比宽度可能会导致浏览器（或 js）四舍五入的十进制数字。

https://jsfiddle.net/cpfgtuzo/17/

相关文章：