DIV CSS 佈局教程網

做web的同學們經常會碰到客戶上傳圖片將網頁內容區撐破了的情況，下面就這個問題我們一種如何使用js處理這個問題的方法，具體思路就是在js判斷客戶端的圖片下載完畢之後適時的對該圖片的寬度或者高度做一些處理，js處理圖片主要是利用js中Image對象，通過 onload 事件和 onreadystatechange 來進行判斷。

（1）第一中方法，通過onload事件，比如：

復制代碼 代碼如下:
<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onload=function(){
alert('圖片的寬度為：'+obj.width+'；圖片的高度為：'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
</script>
<div id="mypic">onloading……</div>

（2）第二種方法，使用 onreadystatechange 來判斷

復制代碼 代碼如下:
<script type="text/javascript">
var obj=new Image();
obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg";
obj.onreadystatechange=function(){
if(this.readyState=="complete"){
alert('圖片的寬度為：'+obj.width+'；圖片的高度為：'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
}
</script>
<div id="mypic">onloading……</div>