使用 clientHeight/clientWidth 的差异使高度等于宽度答案

【问题标题】：Make height equal width using differences of clientHeight/clientWidth使用 clientHeight/clientWidth 的差异使高度等于宽度
【发布时间】：2015-09-09 21:00:08
【问题描述】：

我将 .circle 的高度和宽度都设置为 80 像素。然而，一些浏览器和设备将高度设置为其他值。对于这个例子，我特意将高度和宽度设置为不同的值。我想要做的是获取 clientHeight 和 clientWidth 之间的差异（在本例中为 80 - 50 = 30），然后从 clientHeight 中减去它（80 - 30 = 50）。为什么这不起作用？

PS。此功能不适用于任何浏览器。此外，我不能只将高度设置为等于 clientWidth，因为这也不适用于某些浏览器/设备。

CSS

<style>
    .circle {
        height: 80px;
        width: 50px;
        border-radius: 50px;
        position: relative;
    }
    #circle1 {
        background-color: #4285F4;
    }
    #circle2 {
        background-color: #FF8F2D;
    }
    #circle3 {
        background-color: #34A853;
    }
    #circle4 {
        background-color: #EB4436;
    }
</style>

Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    function circleHeight(){
        sizeDif = document.getElementById("circle1").clientHeight - document.getElementById("circle1").clientWidth;
        alert("height " + document.getElementById("circle1").clientHeight + "</br> width " +  document.getElementById("circle1").clientWidth + "</br> sizeDif " + sizeDif);

        if ((!(sizeDif = 0))) {
            $(".circle")
                .animate({
                height: document.getElementById("circle1").clientHeight - sizeDif + "px"
            }, 500);

            sizeDif = document.getElementById("circle1").clientHeight - document.getElementById("circle1").clientWidth;
            alert("height " + document.getElementById("circle1").clientHeight + "</br> width " +  document.getElementById("circle1").clientWidth + "</br> sizeDif " + sizeDif);
        }
    }
</script>

HTML

<body onload="circleHeight()">
    <p class="circle" id="circle1"></p>
    <p class="circle" id="circle2"></p>
    <p class="circle" id="circle3"></p>
    <p class="circle" id="circle4"></p>
</body>

谢谢

【问题讨论】：

什么浏览器设置了不同的高度值？这不应该发生......
Circle?...但是高度和宽度设置不同...真的不清楚问题是什么或您要做什么。
@gioNicol 当我把它放在我的网站上时，这特别发生在 iPhone 版 Safari 上
@Paulie_D 目标是将高度设置为 50px，这将使其成为一个圆圈
如果您明确将高度设置为 50px 应该没问题。如果不是，还有其他事情发生。我看不出有任何理由在那里使用任何其他值...如果 50px 不起作用，是什么让您认为 80px 会起作用？我并不真的需要 Js 解决方案...只是更多地调查实际上发生了什么。也许指向该网站的链接可能有一些价值。

标签： javascript jquery html css height

【解决方案1】：

您可以尝试更改此行

        if ((!(sizeDif = 0))) {

到这里

        if (sizeDif != 0) {

...

但是我觉得你的代码太“污染”了，试试这个：

function circleHeight(){
    $('.circle').each(function() {
        var
        h = $(this)[0].clientHeight,
        w = $(this)[0].clientWidth,
        dif = h-w;

        if ( dif != 0 ) {
            $(this).height(h-dif);
        }
    });
}

【讨论】：

【解决方案2】：

也许缺少等号

if ((!(sizeDif = 0))) {

应该是

if ((!(sizeDif == 0))) {

【讨论】：