0

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

3 回答 3

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

于 2013-02-16T22:45:54.030 回答
0

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

于 2013-02-16T22:41:25.933 回答
-1

（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包括包含文档的高度（在滚动的情况下会大于高度）、垂直填充和垂直边框。

来源：获取元素的高度

当然，宽度也一样。

于 2013-02-16T22:54:01.320 回答