Applying a CSS rule using javascript

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, Jul 02 '19 at 18:00
add a class to the rule, such as `.width-50`, then apply that to the image. — Get Off My Lawn, Jul 02 '19 at 18:02
@MaximeLaunois the link you provide will be selecting items based on ids — John John, Jul 02 '19 at 18:02

Mister Jojo · Answer 1 · 2019-07-02T19:07:39.460

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 02 '19 at 19:07

answered Jul 02 '19 at 18:06

Mister Jojo

20,093
6
21
40

wow no way, I didn't know you could A. Create css variables and B. Update them dynamically with JS – The Muffin Man Jul 02 '19 at 18:07
@TheMuffinMan and C. Read them. My last exemple => https://stackoverflow.com/questions/56825817/is-it-ok-to-use-a-generator-function-to-replace-a-promise-management – Mister Jojo Jul 02 '19 at 19:11

score 1 · Accepted Answer · answered Jul 02 '19 at 18:05

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 02 '19 at 18:05

adr5240

354
1
2
14

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 – John John Jul 02 '19 at 18:27
Can you post your HTML or explain what happened? I created this very simple version that does work: https://jsfiddle.net/d8a345vk/ – adr5240 Jul 02 '19 at 18:34
ur appraoch worked on all the browsers i tried IE-11,chrome & firefox – John John Jul 02 '19 at 21:05
Thanks for marking it and no worries mate! Just happy to help – adr5240 Jul 02 '19 at 21:09

score 1 · Answer 3 · answered Jul 02 '19 at 18:05

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" />

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, Jul 02 '19 at 18:13
your code worked on Firefox but on IE i got this syntax error on `forEach(elem => elem.style.width = '50px')` — John John, Jul 02 '19 at 19:23

Get Off My Lawn · Answer 4 · 2019-07-02T18:12:05.850

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 02 '19 at 18:12

answered Jul 02 '19 at 18:06

Get Off My Lawn

34,175
38
176
338

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? – John John Jul 02 '19 at 18:20
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. – Get Off My Lawn Jul 02 '19 at 18:26

Applying a CSS rule using javascript

4 Answers4