$（'＃el'）.css（'position'，'static！important'）在Firefox中不起作用？

Question

我有一個div，我想'智能滾動'上下一頁。它開始與位置，固定的，我使用jQuery dicide時更改：

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

作品在Safari + Chrome的偉大，但在Firefox不起作用。爲什麼會這樣？

Answer 1

設置元素的style屬性時，不需要！重要。它將已經覆蓋默認定義的任何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上設置的任何位置，只要它們沒有設置！important也是如此，那麼它們將遵循css規則的通常順序，並且最後添加的規則將會保持不變。

一個很好的規則是儘量避免使用！important，除非絕對沒有其他可用的解決方案，並且在您的示例中使用兩個類，其中一個要固定，​​另一個靜態可以正常工作if出於一些奇怪的原因，只用$ .css（）而不使用！重要的位置設置不起作用。

Answer 4

如果您使用.css方法，jQuery在讀取！important文件時遇到問題。它可以通過使用attr方法來修復。

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

Answer 5

該問題不是一個jQuery的問題，它實際上是一個JavaScript錯誤，因爲更改任何樣式屬性值並不反映100％風格。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';