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

Question

我不太了解 javascripts，从网站获得此代码。 使用 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

您有几个地方没有用引号引起来。

在主代码中：

var imgStr = '<img src="' + path + img + '"' + ' alt = "" >';

在调整大小代码中

var imgStr = '<img src="' + path + img + '" height="' + img.height + '" width="' + img.width + '" alt = "" >';

Answer 2

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();
}