如何在JS中使用數學設置div的高度？
[英]How do I set the height of a div using math in JS?
問題描述
我希望能夠輸入div的寬高比，而不必每次都在CSS中手動計算和輸入高度。
沒什么大不了的，但是這樣會更優雅，我想學習錯誤的地方以供將來參考。
window.onload = function() { var x = document.getElementById("movie"); var ar = 1.33; x.style.height = x.style.height / ar; };
body { background: black; margin: 0 auto; max-width: 200px; height: auto; } #movie { width: 200px; height: 100px; background: navy; } .t { -webkit-animation: change 48s infinite; -moz-animation: change 48s infinite; -o-animation: change 48s infinite; animation: change 48s infinite; } .name { font-family: 'Alegreya Sans', Helvetica, sans-serif; font-size: 13px; color: gold; text-align: center; letter-spacing: 3px; margin-top: 36px; opacity: 0.3; } @keyframes change { from { background-color: black; } to { background-color: white; } }
<body> <div id="movie" class="t"></div> <p class="name">Pedro Costa</p> </body>
2 個解決方案
解決方案1
2 2017-06-27 18:41:19
CSS實際上有一個可以使用的calc方法。
width: calc(100% - 100px);
例如： https ： //www.w3schools.com/cssref/tryit.asp？ filename = trycss_func_calc
解決方案2
1 已采納 2017-06-27 19:21:56
x.style.height是一個空字符串，因為它正在查看#movie元素的style屬性（該屬性最初為空）。 該錯誤可能是由於嘗試將字符串除以數字而引起的。
要弄清楚通過樣式表或<style>塊應用了哪些樣式，可以查看document.getComputedStyle() 。 但是，如果您對元素的高度感興趣，可能會發現最好改為查看元素的offsetHeight屬性。 計算完新高度后，還需要確保在將其作為樣式添加到元素之前，添加正確的單位（例如px ）。
x.style.height = x.offsetHeight / ar + 'px';
window.onload = function() { var x = document.getElementById('movie'); var ar = 1.33; x.style.height = x.offsetHeight / ar + 'px'; };
body { background: black; margin: 0 auto; max-width: 200px; height: auto; } #movie { width: 200px; height: 100px; background: navy; } .t { -webkit-animation: change 48s infinite; -moz-animation: change 48s infinite; -o-animation: change 48s infinite; animation: change 48s infinite; } .name { font-family: 'Alegreya Sans', Helvetica, sans-serif; font-size: 13px; color: gold; text-align: center; letter-spacing: 3px; margin-top: 36px; opacity: 0.3; } @keyframes change { from { background-color: black; } to { background-color: white; } }
<body> <div id="movie" class="t"></div> <p class="name">Pedro Costa</p> </body>
或者，您可以將#movie元素的高度設置為嵌入式樣式，但這通常被認為是較差的做法。
x.style.height = parseInt(x.style.height) / ar + 'px';
window.onload = function() { var x = document.getElementById('movie'); var ar = 1.33; x.style.height = parseInt(x.style.height) / ar + 'px'; };
body { background: black; margin: 0 auto; max-width: 200px; height: auto; } #movie { width: 200px; background: navy; } .t { -webkit-animation: change 48s infinite; -moz-animation: change 48s infinite; -o-animation: change 48s infinite; animation: change 48s infinite; } .name { font-family: 'Alegreya Sans', Helvetica, sans-serif; font-size: 13px; color: gold; text-align: center; letter-spacing: 3px; margin-top: 36px; opacity: 0.3; } @keyframes change { from { background-color: black; } to { background-color: white; } }
<body> <div id="movie" class="t" style="height: 100px;"></div> <p class="name">Pedro Costa</p> </body>
如何通過使用js為Android中的所有手機設置div高度相同
[英]How to set div height same for all mobiles in android by using js
如何使用JavaScript根據另一個div高度設置div高度？
[英]How to set a div height according to another div height using javascript?
使用JS設置div的高度以匹配另一個div的底部位置
[英]Set height of div using JS to match the bottom position of another div
如何通過jQuery使用數字和其他div高度的混合來設置div的高度？
[英]How do you set the height of a div through jQuery using a mix of numbers and other div heights?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.