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

You have mentioned nothing about what issue are you having with current code? Also, what is this.emit & mockFile here? — palaѕн
– palaѕн, Commented Apr 1, 2020 at 18:17
I doubt if this itself works document.querySelector('data-dz-thumbnail') — Anurag Srivastava
– Anurag Srivastava, Commented Apr 1, 2020 at 18:18
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. — gaccerboni
– gaccerboni, Commented Apr 1, 2020 at 18:19

Vimal · Accepted Answer · 2020-04-01 18:32:07Z

2

Yes,it is possible to add some style directly.

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

answered Apr 1, 2020 at 18:32

Vimal

1971 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gaccerboni Over a year ago

It looks like the correct answer, however img size still the same. (im not sure if this is for another reason)

Vimal Over a year ago

It is working for me. can host your code in jsfiddle or some where @gaccerboni

gaccerboni Over a year ago

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'

KyleMit · Accepted Answer · 2020-04-01 18:31:51Z

1

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

edited Apr 1, 2020 at 18:31

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

answered Apr 1, 2020 at 18:26

RBC

4781 gold badge3 silver badges13 bronze badges

Comments

KyleMit · Accepted Answer · 2020-04-02 14:16:08Z

0

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

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

edited Apr 2, 2020 at 14:16

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

answered Apr 1, 2020 at 18:54

gaccerboni

571 silver badge9 bronze badges

Collectives™ on Stack Overflow

Change CSS on element with JavaScript?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related