如何以编程方式将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定义应用于整个页面？

回答

相关问题