Question

我试图获得宽度＆amp; img元素的高度。无论我做什么，它都会给出0px。

function foo(element){
if(element){
    var el=document.querySelector(element);
    var img=el.getElementsByTagName("img")[0];
    alert(img.style.width);
}
}
foo();

和html：

<div id="theid" class="theclass">
   <img id="img" alt="img" name="the img" src="img/img.jpg" />
</div>

<script>
foo("#theid");
</script>

我还尝试了.offsetWidth，.clientWidth和defaultView.getComputedStyle(img,"");

Answer 1

这个怎么样

function foo(imgId){
    var img=document.getElementById(imgId);
    alert(img.offsetWidth);
}

foo('img');

Answer 2

<div id="theid" class="theclass">
   <img id="img" alt="img" name="the img" src="img/img.jpg" />
</div>

<script>
    foo("#theimg");
</script>

你通过传递文件中没有的#theimg来调用foo（），通过传递#img来调用，就像这样

<script>
    foo("#img");
</script>

如果您使用上面的img id，请删除var img = el.getElementsByTagName（＆＃34; img＆＃34;）[0];在你的功能中，我们可以直接访问它。好吧

<script>
    foo("#theid");
</script>

使用它来保持你的功能。好

它会给0px，如果图像无法加载，否则它会给出实际图像的宽度和高度，如果你想访问左，右，上，下等属性这些属性我们需要将图像位置设置为绝对然后我们可以访问。

Answer 3

使用.naturalWidth＆amp; .naturalHeight获取图片的实际尺寸

     function foo(element){
if(element){
    var el=document.querySelector(element);
    var img=el.getElementsByTagName("img")[0];
    alert(img.naturalWidth );
}
}
foo("#theid");

DEMO

Answer 4

除非在CSS中定义，否则图像高度/宽度始终返回0px。

试试这段代码，但是你在这种情况下再次加载图像（可以缓存，但仍然）。

var image = new Image();

// replace with appropriate library method
image.addEventListener("load", function() {
    //get image height/width here
}, false);

image.src = el.getElementsByTagName("img")[0].src;

Answer 5

您需要使用元素offsetWidth

这是working fiddle和代码：

function foo(element) {
    if (element) {
        var el = document.getElementById(element);
        alert(el.offsetWidth);
    }
}
foo("theid");

请注意，我只使用了document.getElementById，因为它将获取该元素。在这种情况下，无需使用getElementsByTagName。并且不要在id前加上＆＃39;＃＆＃39;因为这个符号是jquery而不是javascript。

的JavaScript。无法获得元素风格

5 个答案:

DEMO