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には、含まれるドキュメントの高さ (スクロールの場合は高さだけではありません)、垂直方向のパディング、および垂直方向の境界線が含まれます。

source:要素の高さを取得する

もちろん横幅も同じです。

于 2013-02-16T22:54:01.320 に答える