Question

我正在尝试定位Safari(both mobile and desktop)并通过Javascript为某个类添加一些样式。

这就是我的代码的样子。

(function safaristyles()
{
    if (navigator.userAgent.match(/AppleWebKit/) && ! navigator.userAgent.match(/Chrome/)) {
        var avt = document.getElementsByClassName("avatar");
        avt.style.border = "0" + "px";
        avt.style.padding = "0" + "px";
    }
})(this);

正如我在Webkit inspector中看到的那样，这是我所面临的错误。

类型问题 - 'undefined'不是对象（评估'avt.style.border =“0”+“px”）

我是JS的初学者，所以请耐心等待。

Answer 1

document.getElementsByClassName("avatar");将返回元素是找到元素的HTMLCollection。

所以如果你只有一个项目就可以了

  avt[0].style.border = "0" + "px";
    avt[0].style.padding = "0" + "px";

如果你有多个项目使用for循环。

这是一个类似的东西的简单小提琴 http://jsfiddle.net/qjreK/1/

查看这些以获取更多详细信息

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

http://www.w3schools.com/htmldom/dom_using.asp

Answer 2

document.getElementsByClassName()返回一组元素。如果你想改变一个类的风格，我会看到两个不错的选择：

使用新的类样式附加样式标记。
制作一个循环并更改document.getElementsByClassName()列表中的每个项目。

我建议使用第一种方法，因为它允许您使用该类添加新元素，而无需更改其样式。

Answer 3

方法getElementsByClassName只返回与传入的类名相关的nodeList，但不返回数组。

您可以将此nodeList转换为数组并设置单个项目的样式

var avt = Array.prototype.slice.call(avt, 0);

avt[0].style.padding = "0px";

在Safari中使用getElementsByClassName

3 个答案: