如何以編程方式將CSS定義應用於整個頁面？

我確定這些信息已經存在，但我找不到它;對不起： -/如何以編程方式將CSS定義應用於整個頁面？

我想使用JavaScript創建CSS規則，並將它們應用到整個頁面，就好像它們在文檔頭部的樣式元素中一樣。我不想通過生成CSS文本來實現 - 我想將規則保留爲可以更改的實體（JavaScript變量），從而隨後更改頁面的外觀。

任何幫助將不勝感激！

2012-04-15 Tom

我發現我想要的東西：http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml。我感興趣的是 - 所有我想要的 - 最終發現，看到上面的鏈接 - 是一個實際的CSS規則對象，我可以動態使用，就像使用HTML元素一樣。答案接近，沒有一個是完全的。）

來源

2012-04-26 00:01:41 Tom

我不完全確定你的意思，一個實際的例子會很有用。無論如何，你可以輕鬆地在JS中創建CSS規則和樣式表。這將是這樣的：

var elHead = document.getElementsByTagName('head')[0] 
    , elStyle = document.createElement('style') 
    ; 

elStyle.type= 'text/css'; 
elHead.appendChild(elStyle); 
elStyle.innerHTML = 'body { background : red; }'; //for example

然後樣式表只是你寫的HTML的另一點。

我不是說這是個好主意。

來源

2012-04-15 14:01:53 gotofritz

有沒有辦法將規則附加到elStyle而不是通過編寫或生成它的內部HTML？（例如，像我可以createElement然後將它附加到另一個元素，我可以創建CSS或類似的東西，並將它附加到elStyle？） – Tom 2012-04-15 14:15:29

樣式表有一個cssRules數組和insertRules方法。看看MDN中的這個例子，它的內容非常豐富。基本上它像我的一樣開始，但不是使用innherHTML，而是使用一些CSS方法。如果您需要更多幫助，請給我們留言。 HTTPS：//developer.mozilla。org/en/DOM/CSSStyleSheet/insertRule – gotofritz 2012-04-15 14:28:57

在插入規則後如何刪除或更改規則？ – Tom 2012-04-15 17:38:43

正如Govind所說，LessCSS是您最需要的圖書館。以下是它需要如何使用：

創建兩種不同類型的較少文件。一個會包含你想通過javascript來改變整個外觀的Less變量。第二個文件應該包含使用第一個文件的較少變量來生成css的較少樣式。
啓用'Watch Mode'這是一種客戶端功能，可以讓您的樣式在更改時自動刷新。

現在，當您需要更改外觀時，只需用第一個文件替換第一個文件中的Less變量即可。（使用js刪除第一個Less文件並添加這個新文件）。少JS會自動創建一組新的CSS樣式來改變外觀。

請記住，從Less或SASS創建的CSS無法緩存，因爲它們是動態生成的。

來源

2012-04-15 14:07:01

但這不是他問的。他希望用JS來管理規則，而不是將LESS/SCSS文件處理成CSS。 – gotofritz 2012-04-15 14:23:52

根據你的需要，如果你需要一個快速和骯髒的方式來編輯CSS這裏是可以爲你工作的東西。你可以簡化它甚至擴展它。

function css(){ 
    rules={}; 
    ref=//get a reference to a style element 
    function setRules(){ 
    var out=''; 
    for(var x in rules){ 
     out+=x+'{'+rules[x]+'}'; 
    } 
    ref.innerHTML=out; 
    } 
    this.addRule=function(ident,styles,values){ 
    var a; 
    if(rules[ident]){ 
     a=rules[ident]; 
    } 
    else{ 
     a = new cssR(); 
     rules[ident]=a; 
    } 
    if(styles.push){ 
     var i=0;len=styles.length; 
     for(i;i<len;i++){ 
     a[styles[i]]=values[i]; 
     } 
    } 
    else{ 
     a[styles]=values; 
    } 
    rules[ident]=a; 
    setRules(); 
    } 
    function cssR(){ 

    } 
    cssR.prototype.toString=function(){ 
    var out=''; 
    for(var x in this){ 
     typeof this[x]=='function'?'':out+=x+':'+this[x]+';'; 
    } 
    return out; 
    } 
} 
var a=new css(); 
a.addRule('#main','color','red'); 
a.addRule('#main','top','0px'); 
a.addRule('div .right','float','left'); 
a.addRule('div .right',['float','width'],['right','100px']);

來源

2012-04-15 16:57:56 qw3n

-1

你可以簡單地嵌入的jQuery（你無論如何都應該看看jQuery的）和執行JavaScript這樣的：

$("h2").css("margin-bottom", "5px");

來源

2012-04-15 16:59:38

爲什麼downvote？這不正是他想要做的嗎？當然，它會在DOM中創建很多不必要的屬性，但它的工作原理很簡單。 – 2012-04-15 17:10:40

這不是我低估了，但不是我不想要的：我不想將CSS應用到元素，而是操縱文檔的一般CSS規則。 – Tom 2012-04-15 17:37:34

如何以編程方式將CSS定義應用於整個頁面？

回答

相關問題