Change CSS on element with JavaScript?

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

• palaѕн: You have mentioned nothing about what issue are you having with current code? Also, what is this.emit & mockFile here?
• Anurag Srivastava: I doubt if this itself works document.querySelector('data-dz-thumbnail')
• gaccerboni: This is working but i want to change size of the img. this (dropzone or drag and drop) has an event called emit when creates that div. mockfile is a simulated file on javascript based on a file stored on the server.

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"

• gaccerboni: It looks like the correct answer, however img size still the same. (im not sure if this is for another reason)
• Vimal: It is working for me. can host your code in jsfiddle or some where @gaccerboni
• gaccerboni: This fix my problem on the img but changes all the others that shouldnt: 'code' $('div.content img').css('width', '120'); $('div.content img').css('height', '120'); 'code'

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