javascript - 同様のCSSクラスを作成するにはどうすればよいですか

Question

重複の可能性：
JavaScriptでCSSクラスを動的に作成して適用するにはどうすればよいですか？

テキストフィールドで幅を指定したユーザーに応じて、cssクラスを作成したいと思います。インラインスタイルを使用してそれを行うことができることは知っていますが、世話をする必要のあるプロパティがたくさんあるので、それを避けたいと思います。この質問では、「幅」は単なる例です。

例：ユーザーが幅を「20」と指定した場合、私は-

.w20 {width:20px}

ユーザーが21を指定した場合、

.w21 {width:21px}

等々...

フィドル

ありがとう。

Answer 1

を使用document.stylesheetsして、cssルールをスタイルシートに直接動的に追加できます。

styleSheet = document.styleSheets[0];
// check for undefined could make sense here
styleSheet.addRule(selector, style);

insertRule Doc
addRule Doc

または新しいスタイル要素を作成します

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.class { rules }';
document.getElementsByTagName('head')[0].appendChild(style);

Answer 2

document.stylesheetsを使用して、cssをスタイルシートに動的に追加してみてください。

styleSheet = document.styleSheets[0];
styleSheet.addRule(selector, style);

インラインスタイルを使用することもできます（このアプローチをお勧めします）。

このようにJavaScriptを使用して要素の幅を変更できます。

elem.style.width = "100px";

そしてjQueryを使用する

$("#selector").css("width", "100px");

Answer 3

実行時にcssルールを追加する方法については、こちらをご覧ください。

私の意見：最高のソフトウェア設計では、それを行う必要はありません。