如何在不添加樣式屬性的情況下修改CSS規則？

我是Javascript的新手，我正在嘗試爲現有項目實現功能。我想要修改html元素的CSS規則，以便放大和恢復視頻窗口。當我選擇從Chrome開發人員工具我看到下面的屬性元素：如何在不添加樣式屬性的情況下修改CSS規則？

element.style { 

} 

#plug-in-container.visible { 
    height: 335px; 
    width: 470px; 
    margin-top: -147px; 
    top: 50%; 
    margin-left: -229px; 
    left: 50%; 
}

我用下面的代碼，以放大視頻：

$('.visible').css({ 
    height: '700px', 
    width: '1000px', 
    'margin-top': '-350px', 
    top: '50%', 
    'margin-left': '-480px', 
    left: '50%' 
});

在此之後，我希望#plug的值-in-container.visible改變，但不是說，我看到爲刪除相同的價值觀，我看到element.style更新：

element.style { 
    height: 700px; 
    width: 1000px; 
    margin-top: -350px; 
    top: 50%; 
    margin-left: -480px; 
    left: 50%; 
}

當我動態查看html元素時，發現元素樣式是使用值的高度，寬度等創建的。我不想創建或更新樣式，但我想更新＃plug- in-container.visible，因爲在我想調整視頻窗口的條件下，這會更安全。我怎樣才能做到這一點？

來源

2013-04-29 paris

只要定義另一個CSS規則的級聯至少前一個相同的特異性（或更高，如）

#plug-in-container.visible.enlarged { 
    height: 700px; 
    width: 1000px; 
    margin-top: -350px; 
    margin-left: -480px; 
}

，然後只需添加使用

$('.visible').addClass('enlarged');

所以新類作爲一個進一步的好處，你也可以保持CSS的javascript。

當然你也可以，只要使用這種方法，因爲你需要更新是固定的，由JavaScript不是dinamically評估（在這種情況下，內嵌式的改變是必要的）值

來源

2013-04-29 11:24:58 fcalderan

你看到的是「樣式堆棧」，如果我可以稱之爲。它顯示了所有修改dom元素的規則。刪除線意味着其他一些規則會覆蓋該規則。

您正在使用jQuery編輯css，因此您在該調用中使用的所有樣式都將顯示在元素本身上。就我所知，您無法從JavaScript編輯CSS規則。

如何更安全地編輯班級而不是風格？

來源

2013-04-29 11:24:19 Montas

風格增加了一個內聯樣式將覆蓋樣式表中的所有樣式。這可能會導致問題，如果您使用媒體查詢或類似的。 – gaynorvader 2013-04-29 11:36:47

問題是;我使用** $（'。visible'）.css **來改變屬性，但是在我的html元素上添加了一個樣式屬性。當我關閉視頻時，我將其設置爲隱藏。但是，在這種情況下，即使將其設置爲不可見，由於仍存在樣式屬性，在關閉窗口後它仍然會顯示一個黑色框。而且由於窗口可能關閉的情況太多，因此在適當的地方去除樣式元素是不現實的。 Fabrizio Calderan的回答解決了我的問題。 – paris 2013-04-29 12:45:48

這基本上是如何工作的，除非注入另一個樣式表，否則不能以另一種方式更新CSS樣式。

所以這是預期的行爲。

當您使用$(element).css()時，您更新這些元素的CSS，您不編輯CSS類。這就是爲什麼它被添加到該元素的內聯樣式屬性。

來源

2013-04-29 11:24:38 MMM

如何在不添加樣式屬性的情況下修改CSS規則？

回答

相關問題