可以jquery操縱文檔的全局css定義嗎？

我試圖做一個複選框，當點擊時會隱藏一個特定的CSS類，但我也希望這個效果適用於所有將來獲得該特定類的對象。可以jquery操縱文檔的全局css定義嗎？

例如：我有2周的div：

DIVA是ABC類

DIVB沒有類

我想要的複選框隱藏abc類的所有div的，這很容易，使用$(".abc").hide()。但問題是，如果該網站的其他部分稍後使用abc類別的divB，那麼它將不會被隱藏。因爲jquery代碼當時只適用於divA。

我想要做的是使複選框操縱文檔的全局css定義。所以當用戶點擊複選框時，我會將abc類更改爲隱藏，稍後當任何div加入該類時，它將被隱藏。

這是可能的jQuery中？

來源

2009-08-28 Moe Salih

這是一個很好的答案類似的問題：http://stackoverflow.com/questions/1079237/jquery-equivalent-of-yui-stylesheet-utility – Jourkey 2009-08-29 03:09:04

您可以使用insertRule和addRule（必要時）將新規則添加到.abc選擇器。這應該會影響將來該類應用於此的任何內容。

var stylesheet = document.styleSheets[0], 
    selector = ".abc", rule = "{color: red}"; 

if (stylesheet.insertRule) { 
    stylesheet.insertRule(selector + rule, stylesheet.cssRules.length); 
} else if (stylesheet.addRule) { 
    stylesheet.addRule(selector, rule, -1); 
}

這裏還有一個jQuery插件：$.rule();它可在https://github.com/flesler/jquery.rule

來源

2009-08-28 19:00:06 Sampson

感謝您的答案。雖然我應該提到這個代碼只能在IE中使用。我的應用程序是一個grepmonkey腳本，所以花了幾個小時在網上看，原來Firefox的語法應該是： document.styleSheets [0] .insertRule（「。abc {display：none;}」，0）; – 2009-08-31 17:11:52

jquery.rule住在https://github.com/flesler/jquery.rule時下... – 2012-12-19 13:23:05

在現代Firefox中不起作用。您會收到：「錯誤：操作不安全。」 – caponica 2015-05-15 10:09:01

我可能會通過讓你的複選框添加和刪除類形成<體>元素處理這個問題：

$('body').toggleClass('hideABC');

，並具有以下CSS：

body.hideABC div.abc { display:none; } 
body div.abc { display:block; }

所以，如果你的頁面其他地方有<div>獲得了'.abc'類，那麼它將採用第一個CSS規則並隱藏。

來源

2009-08-29 02:55:40

在我看來，這是一個比替代方案更好（尤其是更簡單）的方法。爲什麼這麼幾票？這種方法有缺陷嗎？ – 2012-07-06 03:42:17

這真的很聰明，似乎它比跨瀏覽器更可靠，比試圖將新規則添加到樣式表中。我想不出任何缺點。 – daGUY 2012-12-19 15:08:29

現在看起來很簡單，但是一旦您開始以編程方式將應用程序類應用於從AJAX輪詢呈現的數據，它將變得非常複雜。 – 2013-04-14 14:23:47

可以jquery操縱文檔的全局css定義嗎？

回答

相關問題