Question

我一直在搞乱画廊。特别是使用javascript来更改单击图片时的宽度和高度。正如您在下面的文档中看到的，我尝试使用客户端浏览器大小的测量值来获得正确的宽度，然后从图片中获取一个比率以指定高度。唯一的问题是，当我试图获得图像的高度和宽度时，函数只返回0.我做了一些研究，发现图像必须加载才能测量。专门加载它没有奏效。我已经尝试了以下代码的相当多的变体，但似乎没有任何工作。我希望有人能指出我错过的明显错误。

提前谢谢你。 HTML，CSS和JS文档如下。这种情况发生在最新版本的chrome，firefox和Internet Explorer中。

HTML文档：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Avacados</title>
        <link href="index.css" rel="stylesheet" type="text/css" />
    </head>

    <body onLoad="resizeAll();">
        <img id="img1" src="assets/2.jpg" onClick="resize(1);" alt="avacado"/>
        <img id="img2" src="assets/3.jpg" onClick="resize(2);" alt="avacado"/>
        <img id="img3" src="assets/4.jpg" onClick="resize(3);" alt="avacado"/>
        <img id="img4" src="assets/6.jpg" onClick="resize(4);" alt="avacado"/>
        <img id="img5" src="assets/7.jpg" onClick="resize(5);" alt="avacado"/>
        <img id="img6" src="assets/8.jpg" onClick="resize(6);" alt="avacado"/>
        <img id="img7" src="assets/2.jpg" onClick="resize(7);" alt="avacado"/>
        <img id="img8" src="assets/3.jpg" onClick="resize(8);" alt="avacado"/>
        <img id="img9" src="assets/4.jpg" onClick="resize(9);" alt="avacado"/>
        <img id="img10" src="assets/6.jpg" onClick="resize(10);" alt="avacado"/>
        <img id="img11" src="assets/7.jpg" onClick="resize(11);" alt="avacado"/>
        <img id="img12" src="assets/8.jpg" onClick="resize(12);" alt="avacado"/>
        <img id="img13" src="assets/2.jpg" onClick="resize(13);" alt="avacado"/>
        <img id="img14" src="assets/3.jpg" onClick="resize(14);" alt="avacado"/>
        <img id="img15" src="assets/4.jpg" onClick="resize(15);" alt="avacado"/>
        <script type="text/javascript" src="imgresize.js">
    </script>
    </body>
</html>

CSS文档：

@charset "utf-8";

body {
    background-color: #000;
    padding: 10px;
    margin: 0px;    
}
img {
    padding: 0px;
    margin: 0px;    
}

JS文件：

var flag;
flag = true;
function resize(num) {
    if(flag) { //not clicked
        resizeAll();
        flag = false;
    }
    else { //clicked
            resizeAll();
            setMost(num);
            flag = true;

            //document.getElementById("img" + num).style.width = "auto";
            //document.getElementById("img" + num).style.height = "auto";

            var image = document.getElementById("img" + num); 

            var he2 = document.getElementById("img" + num).height;
            var wi2 = document.getElementById("img" + num).width;
            var ratio = (he2/wi2);

            document.write(he2);
            document.write(wi2);
            //document.write(ratio);

            document.getElementById("img" + num).style.border = "45px solid #ffff00";
            document.getElementById("img" + num).style.padding = "0px";
            document.getElementById("img" + num).style.position = "relative";

            //document.getElementById("img" + num).style.width = "600px";
            //document.getElementById("img" + num).style.height = "400px";

            var he = document.documentElement.clientHeight - 110;
            var wi = document.documentElement.clientWidth - 110;

            document.getElementById("img" + num).style.width = wi + "px";
            document.getElementById("img" + num).style.height = (he*ratio) + "px";

            //var pic = document.getElementById("img" + num).width();
            //var bodysize = document.getElementsById("images").width();
            //var total = (bodysize * .5) - (pic * .5);
            //var pixels = "px";
            //document.getElementById("img" + num).style.left = (bodysize).toString()+"px";
            //document.getElementById("img" + num).style.left = "50%";
            flag = true;
        }
    }
function resizeAll() {
    for (var i=1;i<16;i++) {
        document.getElementById("img" + i).style.width = "300px";
        document.getElementById("img" + i).style.height = "200px";
        document.getElementById("img" + i).style.border = "0px solid #ffff00";
        document.getElementById("img" + i).style.padding = "0px";
        document.getElementById("img" + i).style.position= "relative";
        document.getElementById("img" + i).style.left = "0%";
        document.getElementById("img" + i).style.right= "0%";
    }
}
function setMost(num) {
    for (var i=1;i<16;i++) {
        document.getElementById("img" + i).style.position= "absolute";
        document.getElementById("img" + i).style.width = "0px";
        document.getElementById("img" + i).style.height = "0px";
        document.getElementById("img" + i).style.border = "0px solid #ffff00";
        document.getElementById("img" + i).style.padding = "0px";
        document.getElementById("img" + i).style.left = "0%";
        document.getElementById("img" + i).style.right= "0%";
    }
}

即使加载，Javascript宽度和高度也会返回0

0 个答案: