使用Javascript更改HTML元素innerHTML部分的CSS属性

Change CSS attributes on part of a HTML element's innerHTML with Javascript

本文关键字：CSS 属性 innerHTML Javascript 更改 HTML 元素 使用      更新时间：2023-09-26

我一直在试图找到一种方法来改变类.studentYear几个元素的innerHTML的一部分，但我一直得到一个JavaScript undefined错误。这就是我正在尝试的。

JavaScript: 

document.getElementsByClassName('studentYear').innerHTML.indexOf(" ").css('color', '#800000');
HTML: 

<div class="accordionContainer">
      <div class="studentYear">Freshman (A1 Schedule)</div>
        <div class="accordionContent" style="display:none;">
            <p class="studentTerm">Fall</p>
           <p>Content</p>
        </div>
</div>

我现在看到它是一个集合(数组类型)。我需要访问集合中的每个项目的innerHTML，并仅在innerHTML的一部分上更改样式属性，在这种情况下，括号中的一切"(A1 Schedule)"。如果按照下面的建议，我仍然得到未定义的错误。

你正在尝试的东西有很多问题。

  • document.getElementsByClassName返回HTMLCollection，这有点像一个数组，但不完全是，所以你不能直接调用innerHTML
  • indexOf(" ")将为您提供空间的第一个索引，该索引可能位于元素之前。它也会给你一个数字。
  • css()在香草JavaScript中不存在，这是jQuery的事情。

看起来你想要设置该元素使用color: #000000。这意味着您实际上需要设置style属性。

下面的代码就可以做到这一点，将它应用到类studentYear中的每一个。

Array.prototype.forEach.call(document.getElementsByClassName('studentYear'), function (element) {
    element.style = 'color: #F00';
});

Array.prototype.forEach.call允许我们将HTMLCollection视为数组并循环遍历它。然后对于每个元素，我们将它的style属性设置为color: #F00(或者任何你想要的，我用红色来使它更明显)。

如果你需要支持旧的浏览器，你不应该直接访问style属性，而应该使用setAttribute来代替:

element.setAttribute('style', 'color: #F00');

正如注释所说，您必须遍历对象并设置每个对象，因为它类似于数组。像这样:

var items = document.getElementsByClassName('studentYear');
for (var i = 0; i < items.length; i++) {
  items[i].setAttribute('style', 'color: #F00');
}

编辑:刚刚看了samanime的回答，在我看来，这个回答似乎更优雅一些。

相关文章：