जावास्क्रिप्ट के साथ <html> में कक्षा जोड़ें?

87

आप <html>जावास्क्रिप्ट का उपयोग करके मूल तत्व में एक वर्ग कैसे जोड़ सकते हैं ?

javascript html

यह उन सवालों में से एक था जो मैंने पूछा था कि मैंने कब शुरू किया। मुझे एक अच्छी जगह कभी नहीं मिली जिसने इसका उल्लेख किया हो। मुझे यहां देखकर खुशी हुई।

— पॉव-इयान

बस जिज्ञासु - आप ऐसा क्यों करना चाहेंगे?

— डेविड होएस्टर

@David आधुनिकीकरण लोड नहीं होने की स्थिति में एक वापसी जोड़ने के लिए। मॉडर्निज़र लोड होने पर क्लास को "js" जोड़ता है।

— ब्रैंडन लेबेडेव

1

यदि आप आधुनिकीकरण का उपयोग कर रहे हैं तो आपको अपने मार्कअप में कक्षा को "नो-जेएस" जोड़ना चाहिए। (अगर आधुनिकीकरण लोड करता है तो यह इस वर्ग को हटा देगा)

— केविन बाउचर

@ केविन - पहले से ही किया था। HTML5 बॉयलरप्लेट पर जाएं !

— ब्रैंडन लेबेडेव

109

इस कदर:

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');
//

— केविन बाउचर
स्रोत

FYI करें, classlist.add / .remove document.documentElement पर काम नहीं करता है।

— एंडी मर्सर

@AndyMercer यह classList.add(ऊंट मामला) है।

— केविन बाउचर

हाँ जाहिर है कि एक टाइपो था। लेकिन मैंने जो कहा वह अभी भी सही है। classListdocument.documetElement पर काम नहीं करता है।

— एंडी मर्सर

मैंने उत्तर देने से पहले इसे तीन अलग-अलग ब्राउज़रों में आज़माया, इसलिए यह "स्पष्ट रूप से एक टाइपो" नहीं था। (क्रोम, फ़ायरफ़ॉक्स, सफारी-- root.classList.add('myCssClass')तीनों में काम किया।) क्या आप IE का उपयोग कर रहे हैं?

— केविन बाउचर

document.documentElement.classList.addयहाँ ठीक काम करने लगता है। क्या 2018 में ब्राउज़रों ने इसका समर्थन करना शुरू कर दिया है?

— एड्रियन

14

यह भी काम करना चाहिए:

document.documentElement.className = 'myClass';

अनुकूलता ।

संपादित करें:

IE 10 इसे आसानी से पढ़ता है; अभी तक:

इसने काम कर दिया!?

ओपेरा काम करता है:

काम करता है

मैं इस बात की पुष्टि भी कर सकता हूँ:

क्रोम 26
फ़ायरफ़ॉक्स 19.02
सफारी 5.1.7

— c24w
स्रोत

आपके उदाहरण में INVISIBLE CHARACTERS है, अर्थात् U+200Bअंतिम एपोस्ट्रोफ के बाद, जिससे यह वेबपैक और अन्य कंपाइलरों में संकलन विफल हो गया!

— एंटोज़ून

@entozoon कितना अजीब है! यह बात बताने के लिए धन्यवाद। मैंने इसे अभी तय कर लिया है :)

— c24w

11

मेरा सुझाव है कि आप jQuery पर एक नज़र डालें ।

jQuery तरीका:

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

— aebersold
स्रोत

26

जावास्क्रिप्ट के साथ एक तत्व का चयन करने के लिए आपको jQuery की आवश्यकता नहीं है।

— डेविड होएस्टर

1

jQuery सीखना आसान है, और इन दिनों वैसे भी सबसे अधिक उपयोग किया जाता है। लेकिन हाँ, आपको इस कार्य के लिए इसकी आवश्यकता नहीं है;)

— aebersold

1

हाँ, ठीक है, हम जानते हैं कि jquery क्या है, लेकिन शुद्ध रूप से जावास्क्रिप्ट प्रश्न का उत्तर "सीखो jquery" से है जो मुझे आश्चर्यचकित करता है :)

— povilasp

2

@Aebersold मैं मानता हूं कि jQuery सीखना और उपयोग करना आसान है, लेकिन केवल क्लास जोड़ने के लिए 50K डाउनलोड करने के लिए (एक अतिरिक्त अनुरोध), यह ओवरहिल IMHO का एक सा है।

— डेविड होएस्टर

JQuery के लिए मौत! जीत के लिए वेनिला जेएस!

— फ्रेशेयबेल

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 कोई बिंदु या # शुरुआत में

— रोस बाउटिस्टा
स्रोत