เพิ่มคลาสใน <html> ด้วย Javascript?

88

คุณจะเพิ่มคลาสให้กับ<html>องค์ประกอบรูทโดยใช้ Javascript ได้อย่างไร?

javascript html

— แบรนดอนเลเบเดฟ
แหล่งที่มา

นี่เป็นหนึ่งในคำถามที่ฉันถามเมื่อเริ่มต้น ฉันไม่เคยพบสถานที่ดีๆที่กล่าวถึงเลย ฉันดีใจที่ได้เห็นที่นี่

— Pow-Ian

แค่อยากรู้ - ทำไมคุณถึงอยากทำเช่นนี้?

— David Hoerster

@David เพื่อเพิ่มทางเลือกในกรณีที่ Modernizr ไม่โหลด Modernizr เพิ่มคลาส "js" เมื่อโหลด

— Brandon Lebedev

1

คุณควรเพิ่มคลาส "no-js" ในมาร์กอัปของคุณหากคุณใช้ modernizr (ถ้า modernizr โหลดมันจะลบคลาสนี้)

— Kevin Boucher

@ เควิน - ทำแล้ว. ไปที่HTML5 Boilerplate !

— Brandon Lebedev

114

แบบนี้:

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

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

หรือใช้เป็นบรรทัด 'setter' ของคุณเพื่อรักษาคลาสที่ใช้ก่อนหน้านี้: (ขอบคุณ @ 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');
//

— เควินบูเชอร์
แหล่งที่มา

FYI, classlist.add / .remove ไม่ทำงานบน document.documentElement

— Andy Mercer

@AndyMercer มันclassList.add(เคสอูฐ)

— Kevin Boucher

ใช่ชัดเจนว่าเป็นการพิมพ์ผิด แต่สิ่งที่ฉันพูดมันยังคงถูกต้อง classListไม่ทำงานบน document.documetElement

— Andy Mercer

ฉันลองใช้เบราว์เซอร์ที่แตกต่างกันสามเบราว์เซอร์ก่อนที่จะตอบกลับดังนั้นจึงไม่ "พิมพ์ผิดอย่างเห็นได้ชัด" (Chrome, Firefox, Safari - ใช้ได้root.classList.add('myCssClass')ทั้งสามอย่าง) คุณใช้ IE หรือไม่

— Kevin Boucher

document.documentElement.classList.addดูเหมือนจะทำงานได้ดีที่นี่ เบราว์เซอร์ในปี 2018 ได้เริ่มรองรับสิ่งนี้หรือไม่?

— เอเดรีย

15

สิ่งนี้ควรใช้งานได้:

document.documentElement.className = 'myClass';

ความเข้ากันได้

แก้ไข:

IE 10 คิดว่าเป็นแบบอ่านอย่างเดียว ยัง:

มันได้ผล!?

Opera ทำงาน:

ผลงาน

ฉันยังสามารถยืนยันได้ว่ามันใช้งานได้ใน:

Chrome 26
Firefox 19.02.2019
Safari 5.1.7

— c24w
แหล่งที่มา

ตัวอย่างของคุณมีอักขระที่มองไม่เห็นกล่าวคือU+200Bหลังจากเครื่องหมายวรรคตอนสุดท้ายทำให้การคอมไพล์ใน webpack และคอมไพเลอร์อื่นล้มเหลว!

— entozoon

@entozoon แปลกยังไง! ขอบคุณที่ชี้ให้เห็น ฉันได้รับการแก้ไขแล้ว :)

— c24w

11

ผมขอแนะนำให้คุณดูที่jQuery

วิธี jQuery:

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

— aebersold
แหล่งที่มา

26

คุณไม่จำเป็นต้องใช้ jQuery เพื่อเลือกองค์ประกอบด้วย JavaScript

— David Hoerster

1

jQuery นั้นง่ายต่อการเรียนรู้และมีการใช้งานเกือบตลอดเวลาในทุกวันนี้ แต่ใช่คุณไม่จำเป็นต้องใช้มันสำหรับงานนี้)

— aebersold

1

ใช่ใช่เรารู้ว่า jquery คืออะไร แต่การตอบคำถามจาวาสคริปต์อย่างหมดจดด้วย "เรียนรู้ jquery" คือสิ่งที่ทำให้ฉันประหลาดใจ :)

— povilasp

2

@aebersold ฉันยอมรับว่า jQuery นั้นง่ายต่อการเรียนรู้และใช้งาน แต่ที่ 50K ในการดาวน์โหลด (พร้อมคำขอเพิ่มเติม) เพียงแค่เพิ่มชั้นเรียนมันก็เป็นเรื่องที่ IMHO มากเกินไป

— David Hoerster

ตายกับ jQuery! Vanilla JS ชนะ!

— Fresheyeball

9

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

classListได้รับการสนับสนุนตั้งแต่ ie10: 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ไม่มีจุดหรือ # ที่จุดเริ่มต้น

— รูสเบาทิสต้า
แหล่งที่มา