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

Question

我確信這些信息已經存在，但我找不到; 對不起： - /

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

任何幫助將非常感謝！

Answer 1

我找到了我想要的東西： http ： //www.javascriptkit.com/dhtmltutors/externalcss3.shtml 。

（感謝所有回答和評論的人。我想要的 - 最后找到，看到上面的鏈接 - 是一個真正的CSS規則對象，我可以動態地處理，就像HTML元素一樣。雖然一些答案接近了，沒有一個是它。）

Answer 2

根據您的需要，如果您需要快速而骯臟的方式來編輯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']);

Answer 3

我不完全確定你的意思，一個實際的例子會很有用。 無論如何，您可以在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。

我並不是說這是一個好主意。

Answer 4

正如Govind所說，LessCSS是最有前途的圖書館，可滿足您的需求。 以下是它的使用方法：

1. 創建2種不同類型的較少文件。 一個包含您希望通過javascript更改整個外觀的Less變量。 第二個文件應該包含較少的樣式，這些樣式將使用第一個文件的較少變量來生成css。
2. 啟用“ 監視模式 ”，這是一種客戶端功能，可使您的樣式在更改后自動刷新。

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

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

Answer 5

你可以簡單地嵌入jQuery（你應該檢查jQuery）並執行這樣的JavaScript：

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