设置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();
})
答
这是超级容易做到。
编辑设置与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>
谢谢你的详细解答。不要忘恩负义,但我在调整大小时遇到麻烦。它似乎加载正常,但随着您调整窗口的高度保持不变,宽度不断变化。 https://jsfiddle.net/pekqh5z1/ –
@MaxPower将您的代码添加到resize事件中,以便在调整窗口大小时改变高度。 –
@ JF-Mechs感谢您的提示:) ...现在只有当我调整窗口大小时才会加载高度,而不是初始加载哈哈......太接近了。我会尽力自己解决,但如果你知道解决方案,我不会阻止你。 https://jsfiddle.net/pekqh5z1/1/ –