집 > 기사 > 웹 프론트엔드 > js_javascript 기술에서 요소 클래스를 설정하는 세 가지 방법 요약

js_javascript 기술에서 요소 클래스를 설정하는 세 가지 방법 요약

WBOY원래의: 2016-05-16 18:02:591256검색

1.el.setAttribute('class','abc');

 >< title>setAttribute('class', 'abc') 


테스트 div
 ; 
var div = document.getElementById('d1') 
div.setAttribute("class", "abc") 
 >< /HTML> 


IE6/7: div의 배경색이 빨간색이 아닙니다.
IE8/9/10/Firefox/Safari/Chrome/Opera: div의 배경색입니다. div는 빨간색입니다
결과: IE6/7은 요소의 클래스를 설정하는 setAttribute('class',xxx) 메서드를 지원하지 않습니다. 

2.el.setAttribute('className', 'abc') 

코드 복사
코드 다음과 같습니다:

> setAttribute('className', 'abc')

테스트 div
<script> ; <br>var div = document.getElementById('d1') <br>div.setAttribute("className", "abc") <br></BODY> > </HTML> <br><br> <br>IE6/7: div의 배경색은 빨간색입니다<br>IE8/9/10/Firefox/Safari/Chrome/Opera: div의 배경색은 빨간색이 아닙니다<br>결과: IE8/9/10/Firefox/Safari/Chrome/Opera는 요소의 클래스를 설정하는 setAttribute('className',xxx) 메서드를 지원하지 않습니다. <br>setAttribute를 사용할 때 첫 번째 매개변수가 class와 className이라는 점이 흥미롭습니다. IE6/7과 IE8/9/10/Firefox/Safari/Chrome/Opera에서는 상황이 정반대입니다. <br><br>3.el.className = 'abc'; <br><br><br><br><br><br>코드 복사<br> </div> <br> 코드는 다음과 같습니다. :<br><br> <br><!DOCTYPE HTML> <br><HEAD> <strong><meta charset="utf-8" /> ;title> el.className = 'abc'</title> <br><style type="text/css"> </strong>.abc { <div class="codetitle">배경: 빨간색; </ 스타일> <span></HEAD> <a style="CURSOR: pointer" data="37889" class="copybut" id="copybut37889" onclick="doCopy('code37889')"><div id="d1">테스트 div</div> div = document .getElementById('d1'); <u>div.className </u></script> 🎜> 모든 브라우저에서 지원됩니다.

성명：

이전 기사：JavaScript 프로토타입 상속의 기본 메커니즘 분석_javascript 기술다음 기사：JavaScript 프로토타입 상속의 기본 메커니즘 분석_javascript 기술

js_javascript 기술에서 요소 클래스를 설정하는 세 가지 방법 요약

관련 기사