javascript - 尝试使用 Javascript 数组在 <div> 中显示随机图像

Question

我对 javascript 不太了解，从网站上得到了这段代码。 使用javascript从div中的数组中显示随机图像 JavaScript 工作正常。 但加载的图像以随机尺寸显示 尝试使用 css 样式和所有 css html 图像属性来调整它们的大小，但没有任何效果，因为它们直接通过 javascript 显示

想要直接在 JavaScript 中调整它们的大小

主要代码:

<script>    
           var arrayImg = new Array();
           arrayImg[0] = "a11.jpg";
           arrayImg[1] = "a12.jpg";


            getRandomImage(arrayImg, "");

          function getRandomImage(imgAr, path) {      
            path = path || 'images/'; // default path here
            var num = Math.floor( Math.random() * imgAr.length );
            var img = imgAr[ num ];
            var imgStr = '<img src="' + path + img + alt = "" >';
            document.writein(imgStr); 
            document.close();
            }

         </script> 

我用来调整图像大小的代码:(但不起作用):

<script>    
           var arrayImg = new Array();
           arrayImg[0] = "a11.jpg";
           arrayImg[1] = "a12.jpg";


            getRandomImage(arrayImg, "");

          function getRandomImage(imgAr, path) {      
            path = path || 'images/'; // default path here
            var num = Math.floor( Math.random() * imgAr.length );
            var img = imgAr[ num ];
            var img.height = 4vw;
            var img.width = 20%;
            var imgStr = '<img src="' + path + img + img.height + img.width + alt = "" >';
            document.writein(imgStr); 
            document.close();
            }

         </script>  

甚至尝试使用:(但仍然不起作用)

document.writeln('<td' + '><imgstr"' + height="180" width="160" border="0" ><' + '/td>');

Answer 1

getRandomImage 函数中有一些语法错误。

function getRandomImage(imgAr, path) {      
    path = path || 'images/'; // default path here
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];

    /* 
        1. variable name should not contain . 
        2. the width and height value should be quoted and placed in "style" attribute
    */
    //var img.height = 4vw;
    //var img.width = 20%;
    var imgHeight = '4vw';
    var imgWidth = '20%';

    /* closed string quotations and placed data in the right attribute */
    var imgStr = '<img src="' + path + img + '"'
               + ' style="height:' + imgHeight + ';width:' + imgWidth + ';'
               + ' alt="">';
    document.writein(imgStr); 
    document.close();
}