Question

我有一个显示公告的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

HEADER：

<?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>

Answer 1

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

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可能什么也找不到。

Answer 2

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

Answer 3

<强>（jsFiddle solution）

这里的问题是你正在尝试

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 包含所包含文档的高度（在滚动时大于高度），垂直填充和垂直边框。

来源：Getting the height of an element

宽度相同。

无法参考图片ID javascript

3 个答案: