$（ '＃el'）。css（ 'position'、 'static！important'）がFirefoxで動作していませんか？

Question

私は、ページで上下にスマートスクロールしたいdivを持っています。これは、固定位置、から始まり、それを変更するとき、私はdicideするjQueryのを使用します。

$('#el').css('position', 'static !important'); 

はサファリ+ Chromeで素晴らしい作品が、Firefoxで動作しません。これがどうなるのか？

Answer 1

要素のスタイルプロパティを設定するときには重要ではありません！デフォルトで定義されているCSSセレクターは、すでにオーバーライドされています。

Answer 2

このためにjQueryは必要ありません。このような何かがWebKitのではなく、ヤモリに動作します：スペックパー

document.getElementById("x").style.color = "red !important"; 

、これは動作しないはずです。 WebKitのバグです。

Answer 3

あなたはjQueryを使ってそのような重要な設定が、あなたが行うことができますJavaScriptでカント：！

document.getElementById('el').style.position = "static !important"; 

しかし、それは唯一のいくつかのブラウザ、すなわちWebkitの中で動作しているようです、とだけも、おそらく、なぜあなたのjQueryのCSSですChrome/Safariで動作しますが、これはおそらくライブラリを更新したためです。

jQueryの以前のバージョンでは、！importantを含むときのcss（）関数は、私が知っている限り絶対に何もしませんでした。

jQueryを使ってこれを行うための唯一のクロスブラウザの方法は、cssTextとのようなものです：

$('#el').css('cssText', 'position: static !important'); 

しかしcssTextは全体のインラインスタイルタグを置き換え、他のすべてのスタイルは、そのように設定することを認識する必要がありますもう一度cssTextに含めてください。

、異なるクラスになりそうたいこれを行うには良い方法：

CSS：

.static_element {position: static!important;} 

のjQuery：

$("#el").addClass('static_element'); 

とそれが使用しているため、重要なことが優先されます！他のクラス/ IDに設定されている位置は！と同様に設定されていない限り、CSSルールの通常の順序に従い、最後に追加されたルールが適用されます。

絶対に他の解決策がない限り、重要なことを試してみることをお勧めします。例では、1つのセットを固定して2つのクラスを使用し、もう1つを静的にすると、 ！importantを使用せずに$ .css（）で位置を設定するだけの奇妙な理由はありません。

Answer 4

jQueryには、.cssメソッドを使用すると、！importantのcssを読むのに問題があります。 attrメソッドを使って修正することができます。

$('#el').attr('style', 'position:static !important'); 

Answer 5

問題は、それがどんなスタイルプロパティの値を変更すると、スタイルに100％反映していないので、実際にはjavascriptのバグだjqueryの問題ではありません。cssText属性、私が見つけた唯一の解決策は、スタイルを変更することです自己それを属性：あなたは空白を削除した場合にどのような

// using jquery 
$('#el').attr('style', 'position:static !important'); 

または

// using native javascript 
document.getElementById('el').setAttribute('style', 'position:static !important'); 

またはstyle.cssText

document.getElementById('el').style.cssText = 'position:static !important';