3

I have some JavaScript code that creates some div elements and it sets their CSS properties. Because I would like to decouple CSS logic from my JavaScript code and because CSS is easier to read in its own .css file, I would like to set the CSS className of my element and then dynamically inject some values into the defined CSS property.

Here is what I would like to do :

style.css:

.myClass { 
    width: $insertedFromJS 
}

script.js:

var myElement = document.createElement("div");
myElement.className = "myClass";

I want to do something like this but at that point myElement.style.width is empty

myElement.style.width.replaceAll("$insertedFromJS", "400px");

I think my problem here is that after the call to myElement.className = "myClass", the CSS is not yet applied.

4

4 に答える 4

2

スタイルの設定は、ページ内のスタイル宣言を定義することで達成できます。

ここに私が意味するものがあります

var style = document.createElement('style');
style.type = 'text/css';
style.cssText = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);
document.getElementById('someElementId').className = 'cssClass';

ただし、それを変更する部分は、思ったよりも難しい場合があります。一部の正規表現ソリューションはうまく機能する場合があります。しかし、ここに別の方法があります。

if (!document.styleSheets) return;
var csses = new Array();
if (document.styleSheets[0].cssRules)  // Standards Compliant {
   csses = document.styleSheets[0].cssRules;
}
else {         
   csses = document.styleSheets[0].rules;  // IE 
}
for (i=0;i<csses.length;i++) {
   if ((csses[i].selectorText.toLowerCase()=='.cssClass') || (thecss[i].selectorText.toLowerCase()=='.borders'))
   {
     thecss[i].style.cssText="color:#000";
   }
}
于 2012-05-02T20:02:38.013 に答える
2

私があなたの質問を正しく理解していれば、css ファイルにプレースホルダー テキストを設定しようとしているように思えます。次に、javascript を使用して、そのクラスに設定したい css 値でテキストを解析します。あなたがやろうとしている方法でそれを行うことはできません。そのためには、DOM から CSS ファイルのコンテンツを取得し、テキストを操作してから、DOMに保存し直す必要があります。しかし、それは何かを行うには非常に複雑な方法です...

myElement.style.width = "400px";

...数秒でできます。css を js から分離するという問題に実際には対処していないことはわかっていますが、それについてできることはあまりありません。結局のところ、css を動的に設定しようとしているのです。

達成しようとしていることに応じて、複数のクラスを定義し、js で className プロパティを変更するだけでよい場合があります。

于 2012-05-02T20:10:57.123 に答える
0

これでjQueryを使用できますか？あなたが使用することができます

$(".class").css("property", val); /* or use the .width property */
于 2012-05-02T19:50:06.030 に答える
-2

jQuery Rule と呼ばれる jQuery プラグインがあります。 http://flesler.blogspot.com/2007/11/jqueryrule.html

ボードゲームの div サイズを動的に設定してみました。Chrome ではなく、FireFox で動作します。IE9は試していません。

于 2013-10-21T17:26:57.213 に答える