Javascript Yardımıyla Harici Css İçeriğini Sayfaya Dahil Etmek

Özellikle ajax ile yüklenen sayfalara harici css veya js dosya eklemek için 3 farklı yöntem.
Javascript Yardımıyla Harici Css İçeriğini Sayfaya Dahil Etmek
 
<style type="text/css" >@import url('http://www.deneme.com/style.css');</style>

Yukardaki   gibi harici bir CSS dosyasını sayfamıza entegre etmek istersek kullanabileceğimiz java yöntemleri şunlar olabilir.

1. Yöntem

var oLink = document.createElement("link")
oLink.href = "mypath/mycss.css";
oLink.rel = "stylesheet";
oLink.type = "text/css";
document.body.appendChild(oLink);

burada body yerine head kullanmak daha mantıklı olmalı

var headID = document.getElementsByTagName("head")[0];        
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'FireFox.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);


2. Yöntem

document.styleSheets[0].deleteRule(1); //delete the second rule
document.styleSheets[0].insertRule('html { color: lime; }',0); //add a new rule at the start
var oLength = document.styleSheets[0].cssRules.length;
document.styleSheets[0].insertRule('body { background: #779; }',oLength); //add a new rule at the end
var oRule = document.styleSheets[0].cssRules[oLength]; //reference the new rule we just added

3. Yöntem

function DosyaUzantı(Dosya){
        return Dosya.substring((Dosya.lastIndexOf(".")+1)).toLowerCase();
}
function HariciCssJs(Dosya){
       
        switch(DosyaUzantı(Dosya))
        {
        case 'css':
          var Eklenecek=document.createElement("link");
                  Eklenecek.setAttribute("rel", "stylesheet");
                  Eklenecek.setAttribute("type", "text/css");
                  Eklenecek.setAttribute("href", Dosya);
          break;    
        case 'js':
           var Eklenecek=document.createElement('script');
                  Eklenecek.setAttribute("type","text/javascript");
                  Eklenecek.setAttribute("src", Dosya);
          break;
        default:
        }

         if (typeof Eklenecek!="undefined")
          document.getElementsByTagName("head")[0].appendChild(Eklenecek);
}


HariciCssJs('tmp/fotograf.css');
 
Yorumunuzu Ekleyin


Yükleniyor...
Yükleniyor...