Applying a CSS rule using javascript [duplicate]

Question

I have the following inside my custom css:-

img[src*="webmail"],img[src*="portal"],img[src*="website"],img[src*="CRM"],
   img[src*="object"],img[src*="Emailar"],img[src*="Contact"]
{
width:70px;
height:130 px;
margin-top:0px;
margin-right:0px;
margin-left:0px;
}

now i want to do some calculation inside my javascript and then apply this css rule (mainly change the width from 70px to 50px):-

img[src*="webmail"],img[src*="portal"],img[src*="website"],img[src*="CRM"],
   img[src*="object"],img[src*="Emailar"],img[src*="Contact"]
    {
    width:50px;
}

so can anyone advice how i can apply this css rule using pure javascript (no jQuery will be preferred).

Thanks

Is it possible to add a classname to these images instead of targeting them by their source? — adr5240
– adr5240, Commented Jul 2, 2019 at 18:00
add a class to the rule, such as .width-50, then apply that to the image. — Get Off My Lawn
– Get Off My Lawn, Commented Jul 2, 2019 at 18:02
@MaximeLaunois the link you provide will be selecting items based on ids — John John
– John John, Commented Jul 2, 2019 at 18:02

Mister Jojo · Accepted Answer · 2019-07-02 19:07:39Z

4

The simplest way is to use a variable css. see : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

:root {
  --ImgWith  : 70px; 
}

img[src*="webmail"],
img[src*="portal"],
img[src*="website"],
img[src*="CRM"],
img[src*="object"],
img[src*="Emailar"],
img[src*="Contact"] {
    width        : var(--ImgWith);
    height       : 130px;
    margin-top   : 0px;
    margin-right : 0px;
    margin-left  : 0px;
}

JavaScript :

const Root = document.documentElement

// ...

Root.style.setProperty('--ImgWith', '50px')

edited Jul 2, 2019 at 19:07

answered Jul 2, 2019 at 18:06

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

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

2 Comments

The Muffin Man Over a year ago

wow no way, I didn't know you could A. Create css variables and B. Update them dynamically with JS

Mister Jojo Over a year ago

@TheMuffinMan and C. Read them. My last exemple => stackoverflow.com/questions/56825817/…

adr5240 · Accepted Answer · 2019-07-02 18:05:02Z

1

You can do something like this if you add a class to these images.

var slides = document.getElementsByClassName("{className}");
for(var i = 0; i < slides.length; i++) {
    slides[i].style.width = "50px"
}

Feel free to add a debugger into the loop to play with individual items but this should do what you want.

answered Jul 2, 2019 at 18:05

adr5240

4541 gold badge3 silver badges14 bronze badges

4 Comments

John John Over a year ago

but this code

var slides = document.getElementsByClassName("{className}"); for(var i = 0; i < slides.length; i++) {     slides[i].style.width = "50px" }

did not change the images width

adr5240 Over a year ago

Can you post your HTML or explain what happened? I created this very simple version that does work: jsfiddle.net/d8a345vk

John John Over a year ago

ur appraoch worked on all the browsers i tried IE-11,chrome & firefox

adr5240 Over a year ago

Thanks for marking it and no worries mate! Just happy to help

Taki · Accepted Answer · 2019-07-02 18:05:09Z

1

Using classes would be better, but if you want to apply this css rule using javascript , you can select the images with document.querySelectorAll, loop through them and modify their style :

document.querySelectorAll(
  'img[src*="webmail"],img[src*="portal"],img[src*="website"],img[src*="CRM"],img[src*="object"],img[src*="Emailar"],img[src*="Contact"]'
 ).forEach(elem => elem.style.width = '50px');

img[src*="webmail"],
img[src*="portal"],
img[src*="website"],
img[src*="CRM"],
img[src*="object"],
img[src*="Emailar"],
img[src*="Contact"] {
  width: 70px;
  height: 130px;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

<img src="https://www.buycpanel.com/wp-content/uploads/2016/09/webmail-e1474583020618.png" />
<img src="https://static3.srcdn.com/wordpress/wp-content/uploads/2019/04/portal-poster.jpg" />

answered Jul 2, 2019 at 18:05

Taki

17.7k5 gold badges28 silver badges48 bronze badges

2 Comments

John John Over a year ago

thanks for the reply, but in my case the

document.querySelectorAll(   'img[src*="webmail"],img[src*="portal"],img[src*="website"],img[src*="CRM"],img[src*="object"],img[src*="Emailar"],img[src*="Contact"]'  ).forEach(elem => elem.style.width = '50px');

did not change the width of the images +i did not get any error inside the browser console..

John John Over a year ago

your code worked on Firefox but on IE i got this syntax error on forEach(elem => elem.style.width = '50px')

Get Off My Lawn · Accepted Answer · 2019-07-02 18:12:05Z

0

Create a class such as .width-50, then add it to the the image.

In the example below the class gets added 2 seconds after the code runs.

setTimeout(() => document.querySelector('img').classList.add('width-50'), 2000)

img[src*="placeholder"] {
  width: 70px;
  height: 130 px;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

img[src*="placeholder"].width-50 {
  width: 50px;
}

<img src="https://via.placeholder.com/150">

edited Jul 2, 2019 at 18:12

answered Jul 2, 2019 at 18:06

Get Off My Lawn

36.6k47 gold badges201 silver badges380 bronze badges

2 Comments

John John Over a year ago

Off MyLawn thanks for the reply .. but i did not get what is the exact purpose for img[src*="placeholder"] and can i define the .width-50 anywhere inside my css?

Get Off My Lawn Over a year ago

I used img[src*="placeholder"] because I am using a different url since you didn't provide a url containing any of the src attributes. You would just do the same thing I did using your src values that you provided.

Collectives™ on Stack Overflow

Applying a CSS rule using javascript [duplicate]

4 Answers 4

2 Comments

4 Comments

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

2 Comments

2 Comments

Linked

Related