jsで画像の幅や高さを取得していますか？私は写真の幅の高さをセンタリングするためにそれを必要とします：

Question

私は本当に何が間違っているのか分かりません... LOL

私はそれをやろうとしていました。

は非常にいいだろう：D

Thxを

<script> 
 

 
var img = document.getElementById("img"); 
 

 
    var height = img.height; 
 
    var width = img.width; 
 

 
alert(height); 
 

 
</script> 
 

 
<div> 
 

 
\t <img id="img" src="https://www.w3schools.com/css/trolltunga.jpg"> 
 

 
</div> 
 

 
<style> 
 

 
#img { 
 
position: absolute; 
 
top: 50%; 
 
left: 50%; 
 
width: 400px; 
 
height: auto; 
 
margin-left: -200px; 
 
} 
 

 

 
</style>

Answer 1

あなたは、変数 "IMG" は、高さや幅などの任意のプロパティやメソッドを持っていない、あなたが必要ですwindowオブジェクトからcomputedStyleを取得するには、次のようにします。

var img = document.getElementById('img'); 

var height = window.getComputedStyle(img,null).getPropertyValue("height"); 
var width= window.getComputedStyle(img,null).getPropertyValue("width"); 

alert(height); 
alert(width); 

Answer 2

jsとjqueryの両方にこれに対する解決策があります。jqueryをより簡単で短期間のソリューションとして使用することをお勧めします。あなたのイメージのターゲット設定をもっと簡単にするでしょう。そこ

---

var height = window.getComputedStyle(img,null).getPropertyValue("height"); 
 
var width= window.getComputedStyle(img,null).getPropertyValue("width"); 
 
jqHeight = $('#img').height(); 
 
jqWidth = $('#img').width(); 
 

 
$('.values').html('<p>Js method --> Height: '+height+' | Width:'+width+'</p></br><p>Jquery method --> Height: '+jqHeight+' | Width:'+jqWidth+'</p>');

#img { 
 
position: absolute; 
 
top: 50%; 
 
left: 50%; 
 
width: 400px; 
 
height: auto; 
 
margin-left: -200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div class="values"></div> 
 

 
<div> 
 
\t <img id="img" src="https://www.w3schools.com/css/trolltunga.jpg"> 
 
</div>