2012-05-02 45 views
3

私はいくつかのdiv要素を作成するJavaScriptコードをいくつか持っており、CSSプロパティを設定しています。 JavaScriptコードからCSSロジックを切り離したいので、CSSは独自の.cssファイルで読みやすくなっているので、私の要素のCSS classNameを設定し、定義されたCSSプロパティにいくつかの値を動的に注入したいと思います。ここでJavaScriptでCSSを動的に設定および変更する方法は?

は私がやりたいものです。

style.css

.myClass { 
    width: $insertedFromJS 
} 

script.js

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

私はこのような何かをしたいが、その時点でmyElement.style.widthが空である

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

私の問題は、myElement.className = "myClass"の呼び出し後、CSSがまだ適用されていないことです。

+0

いつJSを実行していますか?すぐに? 'onload'? 'ondocumentready'? – mwcz

+1

私は少し質問に混乱しています。クラスmyClassを持つすべての要素や作成した要素だけに影響を与えようとしていますか? –

+2

私はジェームズと一緒にこの1つです。質問に答えて、それを再読した後、私は実際にこのようなものの目的がどんなものであろうと混乱しています。 Javascriptコードにハードコードする正しい値を挿入/置換するためにJavaScriptに依存するCSSスタイルシートを作成して、JSとCSSを「デカップル」する必要がありますか?それは、「デカップル」という言葉の意味とはまったく正反対です。 – streetlogics

答えて

2

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

myElement.style.width = "400px"; 

...数秒であなたのために行うことができます。私はそれが本当にjsからCSSのデカップリングの問題に対処していないが、実際にはあなたはそれについて行うことができないたくさんあることを知っている。あなたは結局、CSSを動的に設定しようとしています。

あなたが達成しようとしていることに応じて、複数のクラスを定義し、jsのclassNameプロパティを変更してみてください。 jQueryのルールと呼ばれるjQueryプラグインがあり

+0

私はちょうどテンプレートとして私のCSSファイルを使用し、それに私の変数を注入したいと思うが、私はその種の技術のための最良のアプローチではないと思う、私は私のjavascript CSSの実装にとどまります。どうも – AkademiksQc

0

これでjQueryを使用できますか?

$(".class").css("property", val); /* or use the .width property */ 
+6

この記事のタグはjQueryではなく、JavaScriptについてです。 –

+1

@Oscar Jara - 私の知る限り、jQueryは100%javascriptです。しかし、それほど少なくないので、なぜjQueryが可能かどうか尋ねられました。 –

+4

jQueryはJavascriptですが、JavascriptはjQueryではありません。 – Starx

1

スタイルを設定すると、内部ページスタイル宣言を定義することができます。ここで

は、私はそれを修正する部分は、あなたが思うよりもトリッキーな多くのことができるしかし

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"; 
    } 
} 
+0

1. .inner HTMLを使用しないでください。 ' .textContent'または' .appendChild(document.createTextNode( '...')) 'を使用してください。 2.これは古いIEのバージョンでは動作しません。 IEの場合、 ' .styleSheet.cssText = '...'にアクセスしてください。 –

-1

http://flesler.blogspot.com/2007/11/jqueryrule.html

は、私はそれが動的にボードゲームのいくつかのdivのサイズを設定しようとしました。 FireFoxでは動作しますが、Chromeでは動作しません。私はIE9を試していない。

関連する問題