如何改變一個div寬度時使用javascript

瀏覽器窗口改變大小如何改變一個div寬度時使用JavaScript（jQuery的無）瀏覽器窗口改變大小？我想在用戶調整瀏覽器大小時動態執行這項工作。請幫幫忙，立即... 這份工作與CSS什麼建議嗎？如何改變一個div寬度時使用javascript

來源

2014-03-25 misagh01

爲什麼不只用css？ – Bobby5193

您是否閱讀過重新調整大小事件？你試過什麼了？ https://developer.mozilla.org/en-US/docs/Web/Reference/Events/resize – Mathias

你應該使用CSS一樣簡單的任務，因爲這一點，因爲在高負載下，CSS進行更好的jQuery。 –

使用百分比。例如width="50%"這將改變瀏覽器大小更改時的寬度。

來源

2014-03-25 14:50:08 SSMA

這個代碼不適合我，因爲div元素的父元素具有固定的寬度，而且具有固定的寬度。 – misagh01

您可以設置這與CSS或Javscript

CSS將使用％的即

div { 
    width: 95%; 
}

輕鬆完成

JS會用

var element = document.getElementById("x"); 
window.addEventListener('resize', function(event) { 
    element.style.width = window.style.width; 
});

來源

2014-03-25 14:50:41

謝謝，這段代碼對我不起作用。爲什麼？ – misagh01

什麼不工作？ jsfiddle很樂意幫助你 –

該代碼可以輕鬆完成應適用於所有瀏覽器。但你真的應該使用CSS來代替。

<!DOCTYPE html > 
<html> 
<head> 
    <meta charset="utf8" /> 
    <title>untitled</title> 
</head> 
<body> 
<div id="myDiv" style=" height: 200px; margin:10px auto; background: green;"></div> 

<script type="text/javascript"> 
var myElement = document.getElementById('myDiv'); 
function detectWidth(){ 
    var myWidth = 0; 
    if(typeof (window.innerWidth)== 'number'){ 
     myWidth = window.innerWidth; 
    } 
    else { 
     myWidth = document.documentElement.clientWidth; //IE7 
    } 
    myElement.style.width=myWidth-300+'px'; 
} 
window.onload=function(){ 
    detectWidth(); 
}; 
window.onresize = function(){ 
    detectWidth(); 
}; 
</script> 
</body> 
</html>

來源

2014-03-25 15:32:58 Nillervision

如何改變一個div寬度時使用javascript

回答

相關問題