naturalWidth與width屬性區別

admin發表於2018-04-18

關於naturalWidth基本用法可以參閱JavaScript naturalWidth 屬性一章節。

imge物件的width屬性在某些時候的返回值和naturalWidth是完全一樣的。

特別說明：naturalHeight和height是同樣的道理。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin:0px;
  padding:0px;
}
</style>
<script>
window.onload = ()=> {
  let img = document.getElementById("ant");
  let oshow = document.getElementById("show");
  oshow.innerHTML = img.naturalWidth + "|" + img.width;
}
</script>
</head>
<body>
<div>
  <img id="ant" src="demo/js/img/pretty.jpg">
</div>
<div id="show"></div>
</body>
</html>

上面兩個屬性的返回值是一樣的，都是圖片的真實尺。

特別說明：

（1）.naturalWidth具有一定瀏覽器相容性，不過問題不大。

（2）.兩個屬性都需要等待圖片完全載入完畢才有效。

再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin:0px;
  padding:0px;
}
</style>
<script>
window.onload = ()=> {
  let img = document.getElementById("ant");
  let oshow = document.getElementById("show");
  oshow.innerHTML = img.naturalWidth + "|" + img.width;
}
</script>
</head>
<body>
<div>
  <img id="ant" src="demo/js/img/pretty.jpg" width="100">
</div>
<div id="show"></div>
</body>
</html>

這次就不不同了，naturalWidth返回的依然是圖片的真實尺寸，而width返回的是給img標籤規定的尺寸。

相關文章