Javascript宽度和高度即使在加载时也返回0_Javascript_Jquery_Html_Css_Webpage

Javascript宽度和高度即使在加载时也返回0

javascript jquery html css

Javascript宽度和高度即使在加载时也返回0,javascript,jquery,html,css,webpage,Javascript,Jquery,Html,Css,Webpage,我一直在摆弄画廊。特别是在点击图片时，使用javascript更改宽度和高度。正如您在下面的文档中所看到的，我尝试使用客户端浏览器大小的测量值来获得正确的宽度，然后从图片中获得一个比率来指定高度。唯一的问题是，当我尝试获取图像的高度和宽度时，函数只返回0。我做了一些研究，发现图像必须加载才能测量。让它专门加载并没有起作用。我已经尝试了下面代码的许多变体，但似乎没有任何效果。我希望有人能指出我遗漏的明显错误先谢谢你。下面是HTML、CSS和JS文档。这发生在最新版本的chrome、firef

我一直在摆弄画廊。特别是在点击图片时，使用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>

@charset "utf-8";

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

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%";
    }
}

JS文档：

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

@charset "utf-8";

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

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%";
    }
}

<代码>var标志； flag=true；函数大小（num）{ 如果（标志）{//未单击树脂（）； flag=false； } 否则{// 树脂（）； 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；风险值比率=（he2/wi2）；文件编写（he2）；文件编写（wi2）； //文件写入（比率）； 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（“图像”）.width（）； //var总计=（体型*.5）-（pic*.5）； //var pixels=“px”； //document.getElementById（“img”+num）.style.left=（bodysize.toString（）+“px”； //document.getElementById（“img”+num）.style.left=“50%”； flag=true； } } 函数resizeral（）{

对于（var i=1；iwidth和height是样式属性。使用

.style.width

和

.style.height

。我看到您在下面做了，但在您调用打印高度和宽度时，您没有…：）我还看到在注释掉的代码中，您也有

.width（）

。请记住

.width（）

和

.height（）

是特定于jQuery的，必须使用对象周围的

$（）

调用。只需将对

文档的整个调用放在jQuery容器中：$（document.getElementById（…）.width（）
是正确的语句。