Изменения CSS стиль класса с JavaScript, но не в DOM

Давайте предположим, что у нас есть много элементов (см Live demo):Изменения CSS стиль класса с JavaScript, но не в DOM

<div class="yes">Hello1</div> 
<div class="yes">Hello2</div> 
<div class="yes">Hello3</div> 
<div class="yes">Hello4</div> 
<div class="yes">Hello5</div>

с тем же классом под названием yes, который имеет простой стиль CSS:

.yes { color:red; }

Теперь я хотел бы изменить стиль класса yes.

Конечно, мы можем изменить CSS стиль этого класса с помощью Javascript

var yesarray = document.querySelectorAll('.yes'); 

for (var i = 0, len = yesarray.length; i < len; i++) { 
    yesarray[i].style.color = 'black'; 
}

(или даже более легко с JQuery, с $('.yes').css(...) ...)

Но тогда все эти изменения будут хранятся в DOM:

enter image description here

Это не очень элегантно, если у меня много элементов, что все эти стили «визуализируются в DOM» вот так.

Вопрос:

Как изменить стиль CSS с Javascript таким образом, что изменение стиля не хранится в DOM, но модифицирован в загруженном в памяти CSS вместо этого?

источник

2014-11-08 Basj

Вы делаете это правильно, неважно, являются ли стили встроенными. – adeneo

@adeneo для меня это важно, потому что 1/я могу иметь тысячи таких элементов, 2/Позже я хочу сериализовать структуру DOM. Я считаю, что наличие тысячи встроенных стилей неэлегантно/увеличивает сериализованные данные. – Basj

Если у вас есть тысячи элементов, и вы собираетесь сериализовать структуру DOM, вы, вероятно, делаете что-то еще неправильно, так как это кажется ненужным. Вы можете, конечно, добавить тег стиля к голове, но это действительно даже худшая практика, даже если она вызывает проблему наличия стилей для каждого элемента. – adeneo

Вы не можете редактировать страницу стиля CSS, но вы можете сделать что-то еще.

Вы делаете правильный путь, но с неправильным подходом.

Вы должны добавить стиль ANTOHER к каждому элементу с классом «да». Этот стиль можно назвать в вашем примере "утвержденной"

Таким образом, ваш JQuery вызов будет:

EDIT: правильно сказал Schmalzy: $('.yes').addClass('approved');

эквивалент:

$('.yes').each(){ 
    $(this).addClass('approved'); 
}

и previusly вы указали в своей таблице стилей:

.approved { 
color: black 
}

Итак, на вашей странице вы будете хранить классы (элегантные и короткие), а не встроенные.

источник

2014-11-08 14:57:46 MrPk

Нет необходимости в '.each()' '$ ('. Yes'). AddClass ('approved'); 'сделал бы то же самое. – Schmalzy

Не нужно добавлять класс ко всем элементам. Добавьте один класс в тег '' и используйте селектор потомков CSS для принудительного применения правила. – Pointy

Вместо изменения каждого узла DOM с классом «да», вы можете использовать силу CSS селекторов потомков, чтобы сделать изменения намного дешевле:

CSS:

.yes { 
    color: blue; /* or whatever */ 
} 

.approved .yes { 
    color: black; 
}

Тогда в JavaScript:

$("body").toggleClass("approved", shouldApprove());

только один DOM узел обновляется (хотя, конечно же, браузер все еще имеет пересчитывать макет всей страницы).

источник

2014-11-08 15:12:29 Pointy

Изменения CSS стиль класса с JavaScript, но не в DOM

ответ

Смежные вопросы