为javascript变量添加样式

时间:2019-01-27 17:40:28

标签: javascript css styles

我从website处获得了此代码,并应用于我的代码:

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");

还有很多我可以搜索和应用的可能性,但其中任何一种都可以解决。

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

1 个答案:

答案 0 :(得分:0)

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