類型修改與jQuery從CSS

我申請以下樣式一個div通過不同的jQuery：類型修改與jQuery從CSS

$("#content").css('width',$("#content").width()+'px'); 
$("#content").css('height',$("#content").height()+'px'); 
$("#content").css('position','fixed');

腳本，我刪除了固定的位置和高度的設置，並再次寬度後。

我試圖做到這一點的添加類

.divStatic{ 
position:static; 
height:auto; 
width:auto; 
} 
$("#content").addClass('divStatic');

但這種方式，DIV保持其固定的寬度。如果我用jQuery來做，一切正常。

$("#content").css('position','static'); 
$("#content").css('width','auto'); 
$("#content").css('height','auto');

有什麼區別？

來源

2017-09-23 smatsa

你不能在CSS中編寫JavaScript/jQuery。 –

_你不能在CSS中編寫JavaScript/jQuery嗎？有沒有人試過？ – SourceOverflow

明顯的區別在於瀏覽器應用於元素的樣式的優先級。實際的優先級是：

內聯元素重要！（！重要的」 ......） - 這些都是最優先的風格
重要的內部@media
內聯區塊內的重要內嵌塊！
外部CSS裏面很重要（@media聲明）
外部CSS裏面很重要
內聯元素樣式聲明！（」 ...）
CSS declara內聯塊的內部和灰內外部的CSS樣式（@media聲明）內外部的CSS樣式
CSS聲明並且還可以去看根據你的類型選擇的一些更層次結構元件（由ID選擇在CSS元件
CSS聲明總是具有更高的優先級，然後通過多個類來選擇它，其本身具有比單個類選擇元素更高的優先級）。

您的jQuery內聯樣式聲明，它不能通過向您的元素添加類來重寫。我建議像這樣的東西在重寫JS：

$("#content").css({'width':$("#content").width()+'px', 'height':$("#content").height()+'px', 'position':'fixed'}); 
$(document).on('*actionName*', '.elName', function(event){ 
    $("#content").removeAttr('style').addClass('divStatic'); 
});

無論如何，直接與JS應用CSS是不是真的很好的做法。儘量避免它。考慮使用jQuery addClass來代替外部樣式。（例外 - 只有當你真的知道自己在做什麼時，你纔可以這樣做）

來源

2017-09-23 22:16:55 unnamedfeeling

好，基本上沒有在CSS層次：

HTML屬性（比如<div height="500px">）
元素的CSS（如<div style="color: blue;">
CSS類（如<div class="divStatic>）

由於jQuery命令添加了2.一個，你不能用一個類來覆蓋它，因爲瀏覽器認爲第一個更重要（第二個$（ ...）.css你覆蓋的HTML本身的第一個）

有更多的CSS優先級（如SITH功率和更多），你可以很容易地找到更長，更好的解釋，因爲你現在知道，爲什麼會發生。

要解決這個問題，您可以將第一個CSS樣式移動到類中，然後確保它們不如您的.divStatic描述重要。

來源

2017-09-23 21:57:59 SourceOverflow

類型修改與jQuery從CSS

回答

相關問題