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是最有前途的图书馆，可满足您的需求。以下是它的使用方法：

创建2种不同类型的较少文件。一个包含您希望通过javascript更改整个外观的Less变量。第二个文件应该包含较少的样式，这些样式将使用第一个文件的较少变量来生成css。
启用“Watch Mode”，这是一种客户端功能，可让您的样式在更改后自动刷新。

现在，当您需要更改外观时，只需使用新文件覆盖第一个文件中的Less变量。（使用js删除第一个Less文件并添加此新文件）。 Less JS会自动创建一组新的CSS样式来改变外观。

请记住，从Less或SASS创建的CSS无法缓存，因为它们是动态生成的。

Answer 5

你可以简单地嵌入jQuery（你应该检查jQuery）并执行这样的JavaScript：

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

如何以编程方式将CSS定义应用于整个页面？

5 个答案: