使用 JavaScript 更改元素上的 CSS？

Question

I'm new to frontend development, and I want to rezize an <img> with JavaScript:

Which element?

<div class="dz-image">
    <img data-dz-thumbnail="" alt="principal.png" src="http://localhost:49407/file/Image/660">
</div>

What function im using in js?

this.emit("thumbnail", mockFile, "http://localhost:11111/file/Image/" + principal)
    { document.querySelector('data-dz-thumbnail') }; 

I'm using querySelector to get the spefic <img> element.

Is it possible to add some style directly on that line like height:120; width: 120; height:120; width: 120; ?

Answer 1

Yes,it is possible to add some style directly.

let ele = document.querySelector('[data-dz-thumbnail]')
ele.style.width="120px"
ele.style.height="120px"

Answer 2

Per my understanding, queryselector should be classname , id or tag

Second you can add css by taking a variable for your querySelector line. It is like:

var el = document.querySelector('div'); 
el.style.backgroundColor = 'green';
el.style.display = 'none';
el.style['border-radius'] = '5px';

Answer 3

I solved this using jQuery's .css() method like this:

$('[data-dz-thumbnail]').css('width', '120');
$('[data-dz-thumbnail]').css('height', '120');