7

情報はすでに存在していると思いますが、見つかりませんでした。ごめん ：-/

JavaScriptを使用してCSSルールを作成し、それらをドキュメントのヘッドのスタイル要素にあるかのようにページ全体に適用したいと思います。CSSテキストを生成してそれを実行したくありません-ルールを変更可能なエンティティ（JavaScript変数）として保持し、後でページの外観を変更したいと思います。

どんな助けでも大歓迎です！

4

5 に答える 5

4

欲しいものが見つかりました：http ：//www.javascriptkit.com/dhtmltutors/externalcss3.shtml 。

（回答してコメントしてくれたすべての人に感謝します。私が欲しかったのは-そして最終的に見つけたのは、上のリンクを参照してください-HTML要素のように動的に操作できる実際のCSSルールオブジェクトでした。 、それらのどれも正確にはそうではありませんでした。）

于 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種類の少ないファイルを作成します。全体の外観を変更するためにjavascriptを介して変更したいLess変数を含むもの。2番目のファイルには、cssを生成するために最初のファイルのより少ない変数を使用するより少ないスタイルが含まれている必要があります。
  2. 「ウォッチモード」を有効にします。これは、スタイルが変更されたときにスタイルを自動的に更新できるようにするクライアント側の機能です。

これで、外観を変更する必要がある場合は、最初のファイルのLess変数を新しい変数でオーバーライドするだけです。（jsを使用して最初の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 に答える