Question

我想在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' is not an object (evaluating 'productAttr.style.top = "-90px"')

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

我该如何解决这个问题？

提前感谢您的帮助。

Answer 1

您需要循环搜索结果，因为getElementsByClassName()会返回元素集合：

for(var i = 0; i < productAttr.length; i++)
{
    productAttr[i].style.top = "-90px";
}

Answer 2

这是在js。

document.getElementById('id').style.top = '-90px'

或在你的情况下：

document.getElementsByClassName("class").style.top = '-90px'

首选使用getElementById（）为目标元素分配一个id，因为不能有相同id的元素，因此如果有多个元素具有相同的className，则getElementByClassName（）将返回一个数组。如果你需要定位多个元素，你应该在将更改应用到循环的第n个项目时循环遍历它们：

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

温柔的提醒：还记得要有位置：相对|绝对|固定以确保“顶部”属性有效

感谢Sebastien Daniel

Answer 3

选择班级时，您必须指出什么是标签号，就像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";
    }
});

Javascript - 用类添加css样式到元素

3 个答案: