Javascript로 <html>에 클래스를 추가 하시겠습니까?

87

<html>Javascript를 사용하여 루트 요소에 클래스를 어떻게 추가 합니까?

javascript html

— 브랜든 레베 데프
소스

이것은 제가 처음 시작할 때 물었던 질문 중 하나였습니다. 나는 그것을 언급 한 좋은 장소를 찾지 못했습니다. 여기서 볼 수있어서 기쁩니다.

— Pow-Ian

궁금한 점이 있습니다. 왜 이렇게 하시겠습니까?

— David Hoerster

@David Modernizr이로드되지 않는 경우 폴백을 추가합니다. Modernizr는로드 될 때 "js"클래스를 추가합니다.

— Brandon Lebedev 2012

1

modernizr를 사용하는 경우 마크 업에 "no-js"클래스를 추가해야합니다. (모더 나이저로드하면이 클래스를 제거합니다)

— 케빈 바우처에게

@Kevin-이미했습니다. Go HTML5 Boilerplate !

— Brandon Lebedev 2012

110

이렇게 :

var root = document.getElementsByTagName( 'html' )[0]; // '0' to assign the first (and only `HTML` tag)

root.setAttribute( 'class', 'myCssClass' );

또는 이전에 적용된 클래스를 보존하기 위해 이것을 '세터'라인으로 사용하십시오 : (@ ama2에게 감사드립니다)

root.className += ' myCssClass';

또는 필요한 브라우저 지원에 따라 다음 classList.add()방법을 사용할 수 있습니다 .

root.classList.add('myCssClass');

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList http://caniuse.com/#feat=classlist

최신 정보:

HTML요소 참조를위한보다 우아한 솔루션 은 다음과 같습니다.

var root = document.documentElement;
root.className += ' myCssClass';
// ... or:
//  root.classList.add('myCssClass');
//

— 케빈 바우처
소스

참고로 classlist.add / .remove가 document.documentElement에서 작동하지 않습니다.

— Andy Mercer

@AndyMercer 그것은 classList.add(낙타 케이스)입니다.

— Kevin Boucher

예, 분명히 오타였습니다. 그러나 내가 말한 것은 여전히 옳습니다. classListdocument.documetElement에서 작동하지 않습니다.

— Andy Mercer

답장하기 전에 세 가지 다른 브라우저에서 시도 했으므로 "분명히 오타"가 아니 었습니다. (크롬, 파이어 폭스, 사파리- root.classList.add('myCssClass')세 가지 모두에서 작동합니다.) IE를 사용하고 있습니까?

— Kevin Boucher

document.documentElement.classList.add여기서 잘 작동하는 것 같습니다. 2018 년 브라우저가이를 지원하기 시작 했나요?

— adrian

14

이것은 또한 작동합니다.

document.documentElement.className = 'myClass';

호환성 .

편집하다:

IE 10은 읽기 전용이라고 간주합니다. 아직:

작동했습니다!?

오페라 작품 :

다음에서 작동하는지 확인할 수도 있습니다.

크롬 26
Firefox 19.02
Safari 5.1.7

— c24w
소스

귀하의 예제에는 U+200B마지막 아포스트로피 뒤에 보이지 않는 문자 가있어 웹팩 및 다른 컴파일러에서 컴파일에 실패합니다!

— entozoon

@entozoon 얼마나 이상한! 지적 해 주셔서 감사합니다. 나는 그것을 지금

— 고쳤습니다

11

jQuery를 살펴 보는 것이 좋습니다 .

jQuery 방식 :

$("html").addClass("myClass");

— Aebersold
소스

26

JavaScript로 요소를 선택하기 위해 jQuery가 필요하지 않습니다.

— David Hoerster 2012

1

jQuery는 실제로 배우기 쉽고 어쨌든 요즘 대부분 사용됩니다. 하지만 그래, 당신은이 작업을 위해 필요하지 않습니다)

— aebersold

1

그래, 맞아, 우리는 JQuery와이 무엇인지 알고 있지만 "jQuery를 배울"로 순수 자바 스크립트 질문에 대답 나를 :) 놀랄 것입니다

— povilasp을

2

@aebersold 나는 jQuery가 배우고 사용하기 쉽다는 데 동의하지만, 수업을 추가하기 위해 50K에서 다운로드 (추가 요청 포함)하면 약간의 과잉 IMHO입니다.

— David Hoerster

jQuery의 죽음! 승리를위한 바닐라 JS!

— Fresheyeball 2013-06-13

9

document.documentElement.classList.add('myCssClass');

classListie10부터 지원됩니다 : https://caniuse.com/#search=classlist

— 톰 에스테 레즈
소스

7

덮어 쓰지 말고 클래스를 추가해야합니다.

var headCSS = document.getElementsByTagName("html")[0].getAttribute("class") || "";
document.getElementsByTagName("html")[0].setAttribute("class",headCSS +"foo");

브라우저 비 호환성을 피하기 위해 jQuery를 사용하는 것이 좋습니다.

— ama2
소스

-2

Jquery로 ... 다음과 같이 html 요소에 클래스를 추가 할 수 있습니다.

$(".divclass").find("p,h1,h2,h3,figure,span,a").addClass('nameclassorid');

nameclassorid 포인트가 없거나 시작 부분에 #

— Roos Bautista
소스