设置div高度等于宽度（javascript）

我知道这是一个受欢迎的问题。我已经阅读了解决方案，包括将填充底部设置为相等宽度。除了将这个分配给伪元素，所以插入内容更容易。（加上其他的CSS解决方案）。 css height same as width 设置div高度等于宽度（javascript）

这些做的工作，但它给我插入一些内容的麻烦，这是不值得的麻烦（因为我的整个网站是从这些广场施工）。

我是一个新手，当涉及到JavaScript，但会有一个简单的解决方案，使一个div的高度相等的宽度。（对不起，我太新手甚至显示尝试：/）

我尽量不问太多“编写代码为我”的问题，以便引用或解释也同样赞赏。

答：感谢雅各只是添加到您的代码，这个工程现在在调整大小柜面任何人有这个相同的问题https://jsfiddle.net/pekqh5z1/4/

function updateSize(){ 
var box = $(".test"); 
box.css("height", box.width()); 
} 

$(window).resize(updateSize); 
$(document).ready(function(){ 
updateSize(); 
})

来源

2016-06-22 Max Power

这是超级容易做到。

编辑设置与JS元素的风格，您将style方法所需的性能。

var test = document.querySelector(".test"); 
 
test.style.height = getComputedStyle(test).width;

.test { 
 
    background: red; 
 
}

<div class="test">Super uber goober</div>

随着JS，我们首先选择的.test第一外观，并将其分配给一个变量（var test = document.querySelector(".test");）

然后，我们得到的元件的所计算的宽度，和设置为其高度（test.style.height = getComputedStyle(test).width;）

为了完整起见，这里还有一个jQuery解决方案：

var test = $(".test"); 
 
test.css("height", test.width());

.test { 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="test">Super uber goober</div>

来源

2016-06-22 00:26:25

谢谢你的详细解答。不要忘恩负义，但我在调整大小时遇到麻烦。它似乎加载正常，但随着您调整窗口的高度保持不变，宽度不断变化。 https://jsfiddle.net/pekqh5z1/ –

@MaxPower将您的代码添加到resize事件中，以便在调整窗口大小时改变高度。 –

@ JF-Mechs感谢您的提示:) ...现在只有当我调整窗口大小时才会加载高度，而不是初始加载哈哈......太接近了。我会尽力自己解决，但如果你知道解决方案，我不会阻止你。 https://jsfiddle.net/pekqh5z1/1/ –

设置div高度等于宽度（javascript）

回答

相关问题