Question

我的自定义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）：-

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

任何人都可以建议我如何使用纯JavaScript来应用此CSS规则（不推荐使用jQuery）。

谢谢

Answer 1

最简单的方法是使用变量css。参见：https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

var data = [{...}];
var paperHeight = '???';
var map = '???';

function init() {
    var paper = Snap("#svgContainer");

    for (var i = 0; i < data.length; i++) {
      var d = data[i];

      var color = 'black';
      if (d.year > 1000 && d.year < 1500) {
        color = "red"
      } else {
        color = "orange"
      }

      var animation = {
        cx: map(d.longitude, (0 - 180), 180, 0, paperWidth),
        cy: paperHeight - map(d.latitude, (0 - 90), 90, 0, paperHeight),
        fill: color,
        r: 5
      };

      d.circle = paper.circle(0, 0, 1);
      d.circle.animate(animation, 50);
    }
}

JavaScript：

: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;
}

Answer 2

使用类会更好，但是如果您想使用javascript应用此CSS规则，则可以使用document.querySelectorAll选择图像，循环浏览它们并修改其样式：

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

Answer 3

如果将类添加到这些图像，则可以执行以下操作。

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

可以在循环中随意添加debugger来处理单个项目，但这应该可以满足您的要求。

Answer 4

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

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

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

Answer 5

您将在CSS上创建一个名为

的类

img.Class50px

。然后只需检查文档是否准备就绪。并在所有img元素上添加该类。

如果您不想更改所有img元素（请参见第二个片段），请更改

img.Class50px

为

img [src * =“ webmail”]。Class50px， img [src * =“ portal”]。Class50px， img [src * =“ website”]。Class50px， img [src * =“ CRM”]。Class50px， img [src * =“ object”]。Class50px， img [src * =“ Emailar”]。Class50px， img [src * =“ Contact”]。Class50px， img [src * =“ placeholder”]。Class50px

document.addEventListener("DOMContentLoaded", function(event) { 
 document.querySelector('img').classList.add('Class50px');
 
});

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

img.Class50px
{
    width:50px;
}

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

选择方式...

document.addEventListener("DOMContentLoaded", function(event) { 
 document.querySelector('img').classList.add('Class50px');
 
});

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

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

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

另一种方法是：QuerySelectorAll将获得一个匹配条件的所有元素的数组。使用逗号“，”（或运算符）分隔条件。并使用for循环更改所有找到的元素，并使用setAttribute更改样式属性。

为了避免兼容性问题，我更改为简单的循环；

document.addEventListener("DOMContentLoaded", function(event) { 
  var listElem = document.querySelectorAll('img[src*="webmail"],  img[src*="portal"],img[src*="website"],img[src*="CRM"],img[src*="object"],img[src*="Emailar"],img[src*="Contact"],img[src*="placeholder"]');
  for(var i = 0; i <listElem.length; i++) { 
    listElem[i].setAttribute("style", "width: 50px;"); 
}
    
 
  

 
});

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

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

使用JavaScript应用CSS规则

5 个答案: