使用javascript应用CSS规则

我的自定义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;
}

现在我想在javascript中进行一些计算，然后应用这个css规则（主要是将宽度从70px更改为50px）：-

那么，有谁能建议我如何使用纯javascript应用这个css规则（没有jQuery是首选）

---

谢谢

如果向这些图像添加类，您可以执行类似操作

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

var slides=document.getElementsByClassName（“{className}”）；
对于（变量i=0；i

---

您可以随意在循环中添加

调试器
来处理单个项目，但这应该可以满足您的需要。
使用类会更好，但是如果您想使用javascript应用此css规则，您可以选择图像，通过它们循环并修改它们的样式：


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*=“门户”]，
img[src*=“网站”]，
img[src*=“CRM”]，
img[src*=“对象”]，
img[src*=“Emailar”]，
img[src*=“联系人”]{
宽度：70px；
高度：130像素；
边际上限：0px；
右边距：0px；
左边距：0px；
}
最简单的方法是使用变量css。见：

JavaScript:

const Root = document.documentElement

// ...

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

创建一个类，例如
.width-50
，然后将其添加到图像中

在下面的示例中，该类在代码运行2秒后添加


setTimeout（（）=>document.querySelector（'img'）.classList.add（'width-50'），2000）
img[src*=“占位符”]{
宽度：70px；
高度：130像素；
边际上限：0px；
右边距：0px；
左边距：0px；
}
img[src*=“占位符”]。宽度-50{
宽度：50px；
}
是否可以将类名添加到这些图像中，而不是按其源定位它们？@adr5240可能是将类添加到规则中，例如
.width-50
，然后将其应用于图像。@Maximelauno是您提供的用于选择项目的链接ids@GetOffMyLawn你能详细解释一下吗？哇，不可能，我不知道你能A.创建css变量，B.用JS@TheMuffinMan读一读。我的最后一个例子=>谢谢你的回复，但在我的例子中，
document.queryselectoral（'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'）
没有更改图像的宽度+我在浏览器控制台中没有收到任何错误..您的代码在Firefox上运行，但在IE上，我在
forEach（elem=>elem.style.width='50px'）
上收到此语法错误，谢谢您的回复。。但是我没有弄清楚
img[src*=“placeholder”]
的确切用途，我可以在css中的任何地方定义
.width-50
吗？我使用了
img[src*=“placeholder”]
，因为我使用的是不同的url，因为您没有提供包含任何
src
属性的url。您可以使用您提供的
src
值执行与我相同的操作；对于（var i=0；i
未更改图像宽度您可以发布HTML或解释发生的情况吗？我创建了这个非常简单的版本，它确实可以工作：我们的appraoch在我尝试的IE-11、chrome和Firefox的所有浏览器上都工作过，谢谢你标记它，不用担心，伙计！很乐意帮忙
: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;
}

const Root = document.documentElement

// ...

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