向 javascript 变量添加样式

Question

I got this code from a website and applied to my code:

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

It works properly, but I want some more style to be added to my code. Specially the padding and the object-fit css properties.

I tried to run:

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

and a lot more possibilities that i could search and apply, but any of those worked out.

What is the right way to make this work?

Answer 1

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