7

我确定信息已经存在，但我找不到；对不起 ：-/

我想使用 JavaScript 创建 CSS 规则，并将它们应用于整个页面，就好像它们位于文档头部的样式元素中一样。我不想通过生成 CSS 文本来做到这一点——我想将规则保留为可以更改的实体（JavaScript 变量），从而稍后更改页面的外观。

任何帮助将不胜感激！

4

5 回答 5

4

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

（感谢所有回答和评论的人。我想要的——最终找到，见上面的链接——是一个实际的 CSS 规则对象，我可以动态使用它，比如 HTML 元素。虽然有些答案很接近，他们都不是。）

于 2012-04-26T00:01:41.673 回答
1

根据您的需要，如果您需要一种快速而肮脏的方式来编辑 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-15T16:57:56.077 回答
0

我不完全确定你的意思，一个实际的例子会很有用。无论如何，您可以轻松地在 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-15T14:01:53.810 回答
0

正如 Govind 所提到的，LessCSS 是满足您需求的最有前途的库。以下是它的使用方法：

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

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

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

于 2012-04-15T14:07:01.970 回答
-1

您可以简单地嵌入 jQuery（无论如何都应该检查 jQuery）并像这样执行 JavaScript：

$("h2").css("margin-bottom", "5px");
于 2012-04-15T16:59:38.793 回答