jQueryを使用してCSSルール定義を変更する

Question

たとえば、テーブルをシミュレートするために、多くの要素の幅を変更したいとします。私はあなたがこれを行うことが実現：

$(".class").css('width', '421px'); 

これは、各要素のインラインstyle='width: 421px;'属性を変更します。今、私は何をしたい：実際のCSSルール定義を変更します

.class { 
    width: 375px; ==[change to]==> 421px; 
} 

変更する必要が入れ子になった<ul>と<li>のない1000の場合、それは100のに来るとき、それはこのように思えることだろうjQueryに.css()メソッドを使用させようとするよりも、パフォーマンスが向上します。

私はthis exampleを見つけた - これは私がやろうとしているものです：

var style = $('<style>.class { width: 421px; }</style>') 
$('html > head').append(style); 

私はEVERY最適のクラスを持つことができないので、私は、クラス（$el.removeClass().addClass()）を交換しようとしないんだけど幅（379px、387px、402px ..）。

私は<style>要素を作成し、幅を動的に設定できましたが、もっと良い方法があると思います。

Answer 1

ネイティブJS方法：アリエルFleslerによってcan jquery manipulate the global css definition of the document?

jQueryのプラグイン：https://github.com/flesler/jquery.rule

Answer 2

document.styleSheets Chromeで[0] .addRule作品、何FF

Answer 3

の 'ない関数'私のためには、ヘッダーに空のスタイルブロックを含めることです：

<style id="custom-styles"></style> 

そして、このような何かでそれを操作する：

$('#custom-styles').text('h1 { background: red }') 

私は、これはクロム（まあ、クロム - 63.0）の現在のバージョンで動作しているように見えますテストしてみたとFirefox（57.0.4）。