Быстро перекрасить массив символов Unicode в JavaScript

Question

Я хочу изменить цвет фона / переднего плана для многих символов с тем же классом CSS. Сейчас я делаю это с помощью jQuery & mdash; как $('back_COLORED').css('background-color', '#00FF00'), но этот подход является медленным , когда существует много элементов с таким классом (> 900).

Кажется, это потому, что jQuery сам не меняет правила CSS, но находит все элементы один за другим и применяет к ним встроенные стили. По крайней мере, это то, что я вижу в инспекторе. Итак, вопрос:

• Как я могу изменить сами правила CSS?
• Будет ли это намного быстрее?
• Могу ли я сделать это кросс-браузер (IE6 не в счет)?

UPD : Я пытаюсь создать какой-нибудь редактор цветовых схем. Источник: http://github.com/kurokikaze/cinnabar/. Не обращайте внимания на PHP, редактор полностью на стороне клиента (только некоторые библиотеки извлекаются из сети).

UPD2 : пробный подход к холсту, все еще медленный. Холст филиал находится по адресу http://github.com/kurokikaze/cinnabar/tree/canvas.

Answer 1

Наиболее удобный для браузера способ переопределить определение класса - написать новое правило и добавить его в конец последней таблицы стилей в документе. Вы можете редактировать существующее правило стиля, но даже некоторые недавние браузеры могут затруднить это.

function newRule(selector, csstext){
 var SS= document.styleSheets, S= SS[SS.length-1];
 // this example assumes at least one style or link element
 if(S.rules){
  S.addRule(selector,csstext,S.rules.length);
 }
 else if(S.cssRules){
  S.insertRule(selector+'{'+csstext+'}'),S.cssRules.length)
 }
}

newRule('.someclass','background-color:#0f0');

Вы можете добавить столько 'property: value;' биты в csstext, как вам нужно. Не забудьте поставить префикс «.» к имени класса или «#» к идентификатору, и CSS должен быть написан как правило стиля (с дефисами, а не camelCase).

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

Answer 2

Существуют разные способы в зависимости от того, с каким браузером вы имеете дело. Это задокументировано в режиме причуд .

Некоторые библиотеки предоставляют уровень абстракции, например Утилита YSI StyleSheet .

Там должно быть значительное повышение производительности, так как вы не используете JS / DOM для циклического перебора всех элементов.

Другой подход заключается в предопределении ваших стилей:

body.foo .myElements { … }

А потом редактировать document.body.className

Answer 3

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

Попытка:

$('back_COLORED').hide();
$('back_COLORED').css('background-color', '#00FF00');
$('back_COLORED').show();

или

$('back_COLORED').hide().css('background-color', '#00FF00').show();

Answer 4

Я бы попробовал изменить свойство CSS вместо анализа DOM.
Здесь речь идет о движке CSS против DOM + JS, и победитель очевиден.

Бывает, я только что загрузил небольшую библиотеку, которая заменяет CSS на Javascript: jstyle

Это может быть излишним, но вы найдете в исходном коде jstyle.js весь код, необходимый для кросс-браузерного обновления CSS-свойств вашей страницы.

Answer 5

Если вы можете выбрать родительский div по id, может быть, вы могли бы выбрать по тегу внутри него? Или внутри родителя есть элементы того же типа, которые должны менять цвет, а какие нет?

Было бы неплохо иметь представление о том, что вы здесь строите. 900+ объектов кажется много ... может быть, может быть использован совершенно другой подход? Холст, SVG?

Answer 6

Это плагин jQuery для работы с правилами CSS: http://flesler.blogspot.com/2007/11/jqueryrule.html

не уверен насчет его производительности, но стоит попробовать.

Answer 7

Введите код CSS в тег style:

var style = $('style').attr({
    type:"text/css",
    media:"screen",
    id:'changeStyle'
}).html('.tempClass { color:red } .tempClass p { background:blue }').prependTo('body');

и при каждом изменении цвета с помощью палитры цветов вы переписываете только HTML-код внутри тега #changeStyle

Понятия не имею, работает ли он (не тестировался), но стоит попробовать.

Answer 8

Я думаю, что лучшим решением было бы написать более конкретное правило CSS (которое переопределяло бы обычный цвет), которое можно активировать простым изменением класса css одного элемента.

Например, если у вас была следующая структурная разметка:

<div id="container">
    <span class="colored">Test 1</span>
    <span class="colored">Test 2</span>
</div>

И CSS: -

.colored { background-color: red; }
.newcolor .colored { background-color: blue; }

Затем в своем jquery вы добавляете класс .newcolor в контейнер div: -

$('#container').addClass('.newcolor');

Когда вы это сделаете, второе правило CSS будет переопределять первое, потому что оно более конкретное.