शरीर में जावास्क्रिप्ट का उपयोग करके हेड में स्टाइलशीट जोड़ें

Question

मैं एक सीएमएस के साथ काम कर रहा हूं जो हमें मुख्य अनुभाग संपादित करने से रोकता है। मुझे टैग के ठीक बाद साइट पर सीएसएस स्टाइलशीट जोड़ने की जरूरत है। क्या जेएस के साथ ऐसा करने का कोई तरीका है, जहां मैं पृष्ठ के निचले हिस्से में एक स्क्रिप्ट जोड़ सकता हूं (मुझे टैग से ठीक पहले स्क्रिप्ट जोड़ने की सुविधा है) जो तब स्टाइलशीट को हेड सेक्शन में इंजेक्ट करेगा?

Answer 1

अद्यतन: specs के अनुसार, link तत्व शरीर में अनुमति नहीं है। हालांकि, अधिकांश ब्राउज़र अभी भी इसे ठीक से प्रस्तुत करेंगे। इसलिए, टिप्पणियों में सवालों के जवाब देने के लिए - वास्तव में link को पृष्ठ के head में body नहीं जोड़ना होगा।

function addCss(fileName) { 

    var head = document.head; 
    var link = document.createElement("link"); 

    link.type = "text/css"; 
    link.rel = "stylesheet"; 
    link.href = fileName; 

    head.appendChild(link); 
} 

addCss('{my-url}'); 

या jQuery के साथ एक छोटा सा आसान

function addCss(fileName) { 
    var link = $("<link />",{ 
    rel: "stylesheet", 
    type: "text/css", 
    href: fileName 
    }) 
    $('head').append(link); 
} 

addCss("{my-url}"); 

---

मूल जवाब:

आप जरूरी सिर में जोड़ने के लिए, बस में जोड़ने की जरूरत नहीं है बॉडी टैग का अंत

$('body').append('<link rel="stylesheet" type="text/css" href="{url}">') 

के रूप में जुआन मेंडेस उल्लेख किया है, आप (ऊपर कोड देखें)

Answer 2

यह वही है आप एक बुद्धिमान में चाहते हो जाएगा सिर बजाय

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">') 

और एक ही jQuery के बिना करने के लिए स्टाइलशीट सम्मिलित कर सकते हैं मार्ग। शुद्ध जेएस का भी उपयोग करें।

function loadStyle(href, callback){ 
    // avoid duplicates 
    for(var i = 0; i < document.styleSheets.length; i++){ 
     if(document.styleSheets[i].href == href){ 
      return; 
     } 
    } 
    var head = document.getElementsByTagName('head')[0]; 
    var link = document.createElement('link'); 
    link.rel = 'stylesheet'; 
    link.type = 'text/css'; 
    link.href = href; 
    if (callback) { link.onload = function() { callback() } } 
    head.appendChild(link); 
} 

Answer 3

मैं संशोधित किया को एडी के समारोह को चालू या बंद को दूर या टॉगल स्टाइलशीट। यह स्टाइलशीट की वर्तमान स्थिति भी वापस कर देगा। उदाहरण के लिए यह उपयोगी है, अगर आप दृष्टिहीन लोगों के लिए अपनी वेबसाइट पर एक टॉगल बटन चाहते हैं और कुकी में अपनी वरीयता को सहेजने की आवश्यकता है।

function toggleStylesheet(href, onoff){ 
    var existingNode=0 //get existing stylesheet node if it already exists: 
    for(var i = 0; i < document.styleSheets.length; i++){ 
     if(document.styleSheets[i].href && document.styleSheets[i].href.indexOf(href)>-1) existingNode = document.styleSheets[i].ownerNode 
    } 
    if(onoff == undefined) onoff = !existingNode //toggle on or off if undefined 
    if(onoff){ //TURN ON: 
     if(existingNode) return onoff //already exists so cancel now 
     var link = document.createElement('link'); 
     link.rel = 'stylesheet'; 
     link.type = 'text/css'; 
     link.href = href; 
     document.getElementsByTagName('head')[0].appendChild(link); 
    }else{ //TURN OFF: 
     if(existingNode) existingNode.parentNode.removeChild(existingNode) 
    } 
    return onoff 
} 

नमूना उपयोग:

toggleStylesheet('myStyle.css') //toggle myStyle.css on or off 

toggleStylesheet('myStyle.css',1) //add myStyle.css 

toggleStylesheet('myStyle.css',0) //remove myStyle.css