редактировать: не () селектор с javascript

Question

У меня есть этот селектор в CSS для класса .square

.square:not(:hover){
}

И я хочу добавить к нему пользовательские свойства через JavaScript.

Я пытался сделать это, но это не сработало.

document.querySelectorAll('.square:not(:hover)').forEach((item) => {
  item.style.transition = `background ${animation_delay}s`;
});

Есть ли способ сделать это с Vanilla JS?

Answer 1

document.querySelectorAll('.square:not(:hover)') должен возвращать список узлов. С синтаксисом все в порядке.

Используя инструменты chrome dev, сначала убедитесь, что в DOM существует .square:not(:hover).

Answer 2

Способ доступа к тегу <style> и его изменения заключается в следующем:

// suggest you add an id to your style tag
var style = document.querySelector('style');

var var sheet = style.sheet; // <-- CSSStyleSheet

var rules = sheet.rules; // <-- CSSRuleList

// keep the number of rules small/ordered 
// in the sheet you want to mutate, so you can 
// find them easily
rules[0].selectorText
// > selectorText: ".wmd-snippet-button span"

rules[0].style.backgroundColor
// > ""

rules[0].style.backgroundColor = 'black'
// > "black" // <-- (and see the change in the page!)

Дополнительную информацию см. На страницах MDN CSSStyleSheet и CSSRuleList .

* Примечание. Этот метод изменит ваше правило в таблице стилей, а не метод, который вы показали, когда вы просматриваете все соответствующие элементы и применяете к ним встроенный стиль.