javascript - JQuery not getting correct width - Stack Overflow

admin管理员组

文章数量:1417098

I've used this script to get a width and then apply it to the same element:

$(document).ready(function(){                
    $(".equal-height").each(function(){
        var slideSize = $(this).outerWidth();

        console.log(slideSize);

        $(this).css({ "height" : slideSize + "px" });
    });                
});

However, for some reason, there are elements that sometimes don't get a matching width and height. As you can see in this fiddle: / the last element has the correct dimensions, but the rest are all higher than their width. I'm trying to get them all to be square and I need to support old browsers too.

This only seems to be an issue when the size of the window is smaller and the four items stack in into a 2 column.

I've used this script to get a width and then apply it to the same element:

$(document).ready(function(){                
    $(".equal-height").each(function(){
        var slideSize = $(this).outerWidth();

        console.log(slideSize);

        $(this).css({ "height" : slideSize + "px" });
    });                
});

However, for some reason, there are elements that sometimes don't get a matching width and height. As you can see in this fiddle: https://jsfiddle/cpfgtuzo/5/ the last element has the correct dimensions, but the rest are all higher than their width. I'm trying to get them all to be square and I need to support old browsers too.

This only seems to be an issue when the size of the window is smaller and the four items stack in into a 2 column.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Mar 7, 2016 at 13:11 Sam Willis asked Mar 7, 2016 at 12:50 Sam WillisSam Willis 4,21177 gold badges4444 silver badges6363 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

After your ments on other answer,

I've got numerous elements on the page that use this script and not all are the same size (there are smaller sets of squares too)

And

but the resulting box isn't ing out square. If you inspect your fiddle, the boxes are ~10px too tall

This solution seems to overe those problems, Let me know if this helps, Working Fiddle

$(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
    });                
});

Hmm I think there is a bug with jQuery, when it is calculating the width of each element.

Take this jsfiddle as a workaround.

// 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();
});

Same height on all elements

I'd just use the first box to calculate the height for the other elements - atleast this would ensure the same height. Also it would get rid of that loop..

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

One line to rule them all

But, since this did not fit the scope..

Making squares of differently sized elements

After some messing about it's clear that the widths are returned wrong only after you start tampering with the height. This can easily be tested by menting out the css-mand that sets the height and observing the output.

The solution seems to be to set a predefined height:

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

This will return the exact same width on all elements (the important part) and you can then set the corresponding height programtically without issues.

There's still an issue with rounding though, as the percentage-width might result in decimal numbers that gets rounded by the browser (or js).

https://jsfiddle/cpfgtuzo/17/

本文标签： javascriptJQuery not getting correct widthStack Overflow