Question

我想更改具有类＆＃34; post-feature＆＃34;的所有元素的样式属性值。并包含＆＃34; http＆＃34;

的属性值

所以div元素如下所示：

types

到目前为止，http检查有效。但我无法设置属性值。

我有以下代码

<div class="post-feature" style="backgroundimage:url(http://local.test.com/test_image.jpg);">

Answer 1

您可以使用querySelectorAll('.post-feature[style*="http"]')查找这些元素。

然后简单地遍历它们，即用
设置它们的背景颜色 element.style.backgroundColor = 'orange';

现在，如果您想确保只定位具有background-image和http的元素，则可以使用此选择器：
querySelectorAll('.post-feature[style*="http"][style*="background-image"]')

此外，通过在结束括号i之前添加I（或[style*="http"i]），该值将不区分大小写进行比较。

window.addEventListener('load', function() {
  var elements = document.querySelectorAll('.post-feature[style*="http"]');
  for (var i = 0; i < elements.length; i++) {
  
      elements[i].style.backgroundColor = 'orange';   /* add propert value */
      
      /*  replace class
      elements[i].className = 'myClass';
      */
      
      /*  add a class
      elements[i].classList.add('myClass');
      */
  }
  /* temp log */
  console.log('Found ', elements.length,' element(s)');
})

div {
  height: 40px;
  background-color: gray;
}
div + div {
  margin-top: 10px;
}

<div class="post-feature" style="background-image:url(http://local.test.com/test_image.jpg);"></div>

<div class="post-feature"></div>

<div class="post-feature" style="background-image:url(http://local.test.com/test_image.jpg);"></div>

<div class="post-feature"></div>

更新

要仅改变样式，如颜色等，您甚至不需要脚本，可以单独使用CSS

div {
  height: 40px;
  background-color: gray;
}
div + div {
  margin-top: 10px;
}
/*  for elements that contain "http" and "background-image"  */
.post-feature[style*="http"i][style*="background-image"i] {
  background-color: orange;
}

<div class="post-feature" style="background-image:url(http://local.test.com/test_image.jpg);"></div>

<div class="post-feature"></div>

<div class="post-feature" style="background-image:url(HTTP://local.test.com/test_image.jpg);"></div>

<div class="post-feature"></div>

作为备注，并在一些评论中讨论过，如果要确保background-image属性http中也包含url()，则可以将选择器调整为此，也可以在没有任何脚本的情况下使用，作为CSS规则

.post-feature[style*="background-image:url(http"i] {
  background-color: orange;
}

上面的选择器当然也可以用在第一个样本中，比如

querySelectorAll('.post-feature[style*="background-image:url(http"i]')

Answer 2

首先，您可以将 querySelctorAll() 与CSS查询一起使用，以选择所需类别的元素，在大多数情况下，您应该使用此查询代替 {{ 3}} 因为它返回一个＆＃34;实时节点列表＆＃34;这会导致每次访问DOM时都会重新扫描DOM。

接下来，setAttribute()用于设置HTML元素属性。您要求更改CSS属性的值。虽然可以用setAttribute('style', value)来完成，但它已经非常老了＆＃34;而不是最好的方法，getAttribute('style')也不是读取CSS属性值的最佳方法（如果CSS是从样式表设置的，它将无法工作）。

此外，您的代码正在尝试访问：backgroundimage，但在使用CSS时background-image访问该属性，而通过JavaScript访问时，backgroundImage访问该属性。

要访问应用于HTML元素的内联样式，只需访问该元素的style属性，然后访问您感兴趣的CSS属性的名称。例如：

var bColor = element.style.backgroundColor;

如果样式已从内部样式表或外部样式表应用于元素，则上述方法不适合您，您需要通过{{另一种方式获取它3}}：

var bColor = window.getComputedStyle(element, null).backgroundColor;

但请注意，getComputedStyle()并不总是返回您设置的相同值 - 它是浏览器计算完所有因素后的值。在这种情况下，即使您作为相对引用编写的路径（没有＆＃34; http＆＃34;）也将作为绝对路径返回（使用http）。

因此，这是一种现代方法，只能正确检查background-image CSS属性是否存在http。

注意：此解决方案专门针对http属性中的background-image进行测试。与给出的大多数其他答案不同，此代码将正确忽略除http之外的其他CSS属性中的background-image。检查上一个div的CSS以查看此操作。

＆＃13;

// querySelectorAll() is more efficient than getElementsByClassName()
var features = document.querySelectorAll(".post-feature");

// Loop over the list
for(var i = 0; i < features.length; i++){

  // Get access to the background-image property (called backgroundImage from JavaScript) value,
  // convert that value to lower case and check to see if "http" is in that value
  if(features[i].style.backgroundImage.toLowerCase().indexOf("http") > -1){
  
    // Set the CSS background-color property (called "backgroundColor" in JavaScript) to orange:
    features[i].style.backgroundColor = "orange";
    
    // Just for testing:
    features[i].textContent = features[i].style.backgroundImage;
    
  } else {
  
    alert("No change");
    
  }  
}

＆＃13;

.post-feature { width:100%; height:50px; border:1px solid black; background-color:gray; color:yellow; }

＆＃13;

<!-- The correct CSS property is "background-image", not "backgroundimage" -->
<div class="post-feature" style="background-image:url(http://local.test.com/test_image.jpg);"></div>
<div class="post-feature" style="background-image:url(test_image.jpg);"></div>
<div class="post-feature" style="background-image:url(http://local.test.com/test_image.jpg);"></div>
<div class="post-feature" 
     style="border-image: url('http:///images/border.png') 30 30 repeat;background-image:url(test_image.jpg);">I have "http" in one of my CSS properties, but not "background-image", so I shouldn't be orange.</div>

＆＃13;

Answer 3

使用element.style.backgroundColor和indexOf

var features = document.getElementsByClassName(".post-feature")[0].getAttribute("style");

if (features.indexOf("http") > -1) {

  features.style.backgroundColor = "orange";

} else {

  alert('no change');

}

Answer 4

我觉得你的代码有些不对，试试这段代码

element.setAttribute("style", "background-color: orange;"); // bad

或

element.style.backgroundColor = "orange"; // good

Answer 5

检查这个小提琴

https://jsfiddle.net/vywk72j8/2/

<div class="post-feature" style="background-image:url(http://local.test.com/test_image.jpg);">
tt</div>


var feature = document.getElementsByClassName("post-feature")[0];
if (feature.style.backgroundImage.indexOf("http") !== -1) {
    feature.style.backgroundColor = "orange";
} else {
    alert('no change');
}

在您的代码中，您将获取要素

中的属性值

var features = document.getElementsByClassName(".post-feature")
[0].getAttribute("style");

此功能是包含属性值的字符串，而不是元素，因此您无法使用它来设置值。

如何仅使用Javascript更改属性或类？

5 个答案: