时间戳

首页 > 解决方案 > 将样式添加到 javascript 变量

javascript - 将样式添加到 javascript 变量

问题描述

我从一个网站得到这个代码并应用于我的代码：

window.onload = function () {
      var fileUpload = document.getElementById("fileupload");
      fileUpload.onchange = function () {
        if (typeof (FileReader) != "undefined") {
          var dvPreview = document.getElementById("dvpreview");
          dvPreview.innerHTML = "";
          var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png)$/;
          for (var i = 0; i < fileUpload.files.length; i++) {
            var file = fileUpload.files[i];
            if (regex.test(file.name.toLowerCase())) {
              var reader = new FileReader();
              reader.onload = function (e) {
                var img = document.createElement("IMG");
                img.width="300";
                img.height ="300";
                img.src = e.target.result;
                dvPreview.appendChild(img);
              }
              reader.readAsDataURL(file);
            } else {
              alert(file.name + " is not a valid image file.");
              dvPreview.innerHTML = "";
              return false;
            }
          }
        }
      }
    };

它工作正常，但我希望在我的代码中添加更多样式。特别是 padding 和 object-fit css 属性。

我试图运行：

 img.objectFit="cover";
 img.style.objectFit="cover";
 img.css("object-fit","cover");

以及我可以搜索和应用的更多可能性，但其中任何一个都解决了。

使这项工作的正确方法是什么？

标签： javascriptcssstyles

解决方案

var img = document.createElement('img');
img.width = '300';
img.height = '300';
img.style.padding = '20px';
img.style.objectFit = 'fill';
document.body.appendChild(img);

推荐阅读