无法引用图像id javascript

Cannot reference image id javascript

本文关键字：id javascript 图像 引用      更新时间：2023-09-26

我有一个显示公告的PHP页面，文本中嵌入了一个图像。我在这里添加了简化代码。问题是，当我尝试更改图像的大小时，DOM无法引用该图像。在实际的文件中，如果我刚加载页面，则无法引用图像，但如果我导航回它（使用日期选择器），突然之间，Javascript的大小调整工作得很好。只是在第一次加载图像时不起作用。

function resizeImg () {
        var w=document.getElementById("textImg").width;
        var h=document.getElementById("textImg").height;
        alert(h+" "+w);
        if (w>300 || h>300) {
            if (w>300) {
                var factor=((300/w));
            } else {
                if (h>300) {
                    var factor=((300/h));
                }
            }
            w*=factor;w=Math.round(w);
            h*=factor;h=Math.round(h);
            document.getElementById("textImg").style.width=w+"px";
            document.getElementById("textImg").style.height=h+"px";
        }
    }//end FUNCTION

标头：

<?php 
    $pic="20130213.gif";
    $blText="Yes, you heard right. Thats all we are going to have for dinner. Why?  because cream of corn is good when you put sugar in it, with some pepper and butter. So, quit your complaining and eat the slop.";
?>

HTML:

<body>
   <div id="bullText" class="tBorder">
        <div class="tBorder" id="bullTextArea">
        <?php 
            $file="../../Admin/aPages/upload/".$pic;
            echo "<img id='textImg' class='textImage' src='".$file."' alt='no image' />";
            echo $blText 
        ?>
        </div>
    </div><!--BULL TEXT DIV-->
    <?php
        echo "<script>resizeImg ()</script>";
    ?>
</body>

您可能需要等待图像加载：

el = document.getElementById("textImg");
if (el.addEventListener){
  el.addEventListener('load', resizeImg, false); 
} else if (el.attachEvent){
  //IE uses attachEvent
  el.attachEvent('onload', resizeImg);
}

在此之前，您应该等待DOM就绪，否则document.getElementById可能一无所获。

你试过把js代码放在window.onload中吗？

（jsFiddle解决方案）

这里的问题是你正在尝试

var w=document.getElementById("textImg").height;

但这只有当你自己设定高度时才有效。否则，您需要使用以下选项之一：

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeight包括高度和垂直填充。

offsetHeight包括高度、垂直填充和垂直边框。

scrollHeight包括所包含文档的高度（在滚动的情况下会大于高度）、垂直填充和垂直边框。

来源：获取元素的高度

宽度当然也一样

相关文章：