css：更改規則集與使用選擇器切換類/應用樣式

最近我想知道如何編輯元素樣式，而不是通過在dom上切換其類，而是通過更改css類或選擇器的實際規則集。因此，而不是像css：更改規則集與使用選擇器切換類/應用樣式

$('.some').hide()

或

$('.some').addClass('hidden')

爲什麼不改變直接與document.styleSheets和東西的規則？這種方法不會更普遍，至少在許多元素的情況下，我們會讓瀏覽器處理規則集本身的變化嗎？

例如，您可以將樣式添加到.some，如display: none;和所有.some元素都將被隱藏起來。不需要遍歷js中的所有元素並手動隱藏它們（如上面的示例）。

直接更改規則集會更有可能鼓勵具有上下文感知的類（或者您可以稱之爲..），因爲您會隱藏所有#persons > .item或其他內容。

我仍然不知道關於這一點被命名爲背景，例如像控制的名字，像.calendar.ticket.item類，與單功能的類最佳做法，像.hidden.left.green，因爲我通常需要兩種類型的約定。

我只是問你對這個有什麼想法，修改樣式表方法的好處和缺點與像jquery這樣的庫如何處理更改樣式有什麼關係？

另外，你認爲什麼是好的做法，你認爲更多的是什麼？

咳嗽 JavaScript和黑客咳嗽

來源

2011-10-14 sharp johnny

操縱document.styleSheets是棘手的由於不同的實現方式，以及缺乏規則選擇的API。目前，如果你想操縱樣式表中的規則，你必須經過這個過程：

iterate over document.styleSheets 
    iterate over rules within current styleSheet object 
     if rule matches our class, edit the rule styles

然後是存在的級聯問題。您如何知道您所匹配的規則上的特定樣式不會被不同的規則覆蓋在頁面樣式表的某個位置？如果您在更改所找到的第一個匹配規則後立即退出，則不能確定所設置的樣式實際上是否會應用到該元素，除非您在每個元素上都粘貼!important，這會讓您看到完全不同的樣式一系列問題。

即使當你操縱的樣式表規則，瀏覽器仍然有的同樣的工作做 —它通過應用級聯重新計算所有樣式。

所以，操縱styleSheets現在看起來不太吸引人，是嗎？堅持課堂切換，相信我。使用jQuery和像querySelectorAll這樣的現代API可以快速實現，並且瀏覽器仍然會像重新計算樣式值一樣執行所有艱難的工作。

來源

2011-10-14 11:43:08

嗯，那是真的。但是，如果您通過代碼添加樣式表，那麼您擁有所有對它的引用，如果其最後/最新樣式表基本覆蓋其他樣式。那麼把迭代的部分拿走，並說js會在它自己的樣式表中創建自己的規則......所有這些都包裝在一個漂亮的api中？ –

@sharpjohnny：這不值得。如果你打算這樣做，你可以直接將樣式添加到每個元素，這樣你就不會與級聯發生衝突。通過操作元素的'className'屬性可以添加/刪除類 - 一旦你完成了瀏覽器接管並完成它的功能**比JavaScript更快的速度**可以做到這一點。 –

這樣一個棘手的問題:(

但是，如果你就拿樣板，它具有一定的標準類使用，如：

/* Hide from both screenreaders and browsers: h5bp.com/u */ 
.hidden { display: none !important; visibility: hidden; } 

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */ 
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: ; position: absolute; width: 1px; } 

/* Hide visually and from screenreaders, but maintain layout */ 
.invisible { visibility: hidden; }

地方變得棘手的是，如果它是你因爲JS需要隱藏，那麼你應該只用JS隱藏它，然後它會在JS被禁用時起作用如果它不是依賴於JS的東西，那麼你將它隱藏在HTML中

所以JS函數=隱藏與JS（通過使用JS或添加隱藏類）

基本HTML隱藏=隱藏的HTML類

Styleswitching VS JS切換

Basicly JS切換使您oppertunity添加效果等，只是用預先定義的類限制，這些限制一些。但願意看到一些資源比較:)

來源

2011-10-14 11:43:55

css：更改規則集與使用選擇器切換類/應用樣式

回答

相關問題