Safari에서 getElementByClassName을 사용하여

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입니다. 이것은 내가 직면 한 오류입니다.

문제 유형

- 가 '정의되지 않은'는 객체가 아닌 내가 JS 물건에 초보자 해요

('avt.style.border = "0"+ "픽셀"을 평가)는, 그래서 참아주세요 나랑.

Answer 1

document.getElementsByClassName("avatar"); 요소를 반환합니다. 발견 된 요소의 HTMLCollection입니다. 여러 항목이있는 경우

그래서 당신은 단지 하나 개의 항목이있는 경우이

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

을 일하는 것이 루프를 사용합니다.

여기에서 자세한 내용 https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

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

Answer 2

document.getElementsByClassName() 요소의 집합을 반환

에 대한 비슷한이
http://jsfiddle.net/qjreK/1/

체크 아웃에 대한 간단한 바이올린입니다. 클래스의 스타일을 변경하려면 두 가지 좋은 옵션이 있습니다.

1. 새 클래스 스타일로 스타일 태그를 추가하십시오.
2. 루프를 만들고 document.getElementsByClassName()의 목록의 각 항목을 변경하십시오. 당신이 그것의 스타일을 변경하지 않고 그 클래스에 새로운 요소를 추가 할 수 있도록 때문에 내가 에 recomment 것이다

는 첫 번째 방법를 사용합니다.

Answer 3

getElementsByClassName 메서드는 전달한 classname과 일치하는 nodeList를 반환하지만 배열은 반환하지 않습니다.

당신은

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

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