Javascript - 将 css 样式添加到具有类的元素

Posted 2023-05-08

【中文标题】Javascript - 将 css 样式添加到具有类的元素

【英文标题】：Javascript - add css style to element with class

【发布时间】：2016-05-27 19:00:40

【问题描述】：

我只想在 JS 中添加一种 css 样式。我不想只为一件事包含 jQuery。

我的代码：

document.addEventListener('DOMContentLoaded', function() 
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) 
        var productAttr = document.getElementsByClassName('product-attributes');
        productAttr.style.top = "-90px";
    
);

来自控制台的错误是：

TypeError: 'undefined' 不是对象（评估 'productAttr.style.top = "-90px"'）

如果我想更改其他样式 f.e.不透明度或颜色，我遇到了同样的问题。

我该如何解决这个问题？

提前感谢您的帮助。

【问题讨论】：

How to change css property using javascript的可能重复

getElementsByClassName 返回匹配元素的集合，而不是单个对象

【参考方案1】：

你需要遍历你的结果，因为getElementsByClassName()返回一个元素集合：

for(var i = 0; i < productAttr.length; i++)

    productAttr[i].style.top = "-90px";

【参考方案2】：

也许是因为你不能在 CSS 中给出负值

top:"-90px" === bottom "90px"

也许现在可以工作了

document.addEventListener('DOMContentLoaded', function() 
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) 
        var productAttr = document.getElementsByClassName('product-attributes');
        productAttr.style.bottom = "90px";
    
);

【参考方案3】：

最好为目标元素分配一个 id，然后使用 getElementById() 来定位，因为不可能有具有相同 id 的元素，因此如果有多个具有相同 className 的元素，getElementByClassName() 将返回一个数组。如果您需要定位多个元素，您应该在将更改应用到正在循环的第 n 个项目时对它们进行 for 循环：

for(x = 0; x < array.length; x++)
    array[x].style.top = '-90px';

温馨提示：还记得有 position: relative|absolute|fixed 以确保 'top' 属性有效

感谢 Sebastien Daniel 编辑

【讨论】：

当使用getElementsByClassName() 时，您正在获得一个集合（即类似数组的结构）。您的上述代码将生成错误，因为 html 集合没有样式属性。另外，不鼓励通过 style 属性设置样式，你应该使用element.setAttribute("style", "value");

所以最好把元素改成有id，然后按id定位元素？

不一定，这完全取决于您的用例。如果您的目标是唯一的，那么最好使用#id 和getElementById()。但是，如果您有多个需要调整的元素（共享一个类名，例如），那么使用getElementsByClassName() 将允许您将它们全部抓取并使用任何处理这些元素的方法对其进行迭代需要通过。

好的，谢谢，我添加了 id 而不是 class，它可以工作。谢谢

【参考方案4】：

在选择类的时候必须标明是什么数字作为Tag，不像id只有一个。

根据您要应用的类，它可能类似于以下代码：

document.addEventListener('DOMContentLoaded', function() 
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) 
        var productAttr = document.getElementsByClassName('product-attributes');
        productAttr[0].style.top = "-90px";
        productAttr[1].style.top = "-90px";
        productAttr[2].style.top = "-90px";
    
);