設置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）

回答

相關問題