Есть ли способ применить несколько стилей CSS в пакете, чтобы избежать множественных перерасчетов?

Ответ 1

Не прямо, но есть несколько хороших предложений по минимизации влияния переплавов здесь:

http://dev.opera.com/articles/view/efficient-javascript/?page=3

Короче говоря, попробуйте что-то вроде этого:

Второй подход заключается в определении нового атрибут стиля для элемента, вместо назначения стилей одним один. Чаще всего это подходит для динамические изменения, такие как анимация, где новые стили не могут быть известны заранее. Это делается с использованием свойство cssText стиля объект или с помощью setAttribute. Internet Explorer не разрешает вторая версия, и нуждается в первом. Некоторые старые браузеры, включая Opera 8, нужен второй подход, и не понимаю первого. Так что легко путь - проверить, была ли первая версия поддерживается и используется, а затем падает вернитесь ко второму, если нет.

var posElem = document.getElementById('animation');
var newStyle = 'background: ' + newBack + ';' +
  'color: ' + newColor + ';' +
  'border: ' + newBorder + ';';
if( typeof( posElem.style.cssText ) != 'undefined' ) {
  posElem.style.cssText = newStyle; // Use += to preserve existing styles
} else {
  posElem.setAttribute('style',newStyle);
}

Ответ 2

Вы можете поместить все стили в класс CSS

.foo { background:#000; color:#fff; ... }

а затем назначьте его свойству className

// javascript
var your_node = document.getElementById('node_id');
your_node.className = 'foo'

Это должно вызвать только одно перерисовку/reflow

Ответ 3

использование:

document.getElementById('elemnt_ID').setAttribute('style','color:white; margin:5px;');

Ответ 4

Если вы используете jQuery, у него есть функция .css, которая позволяет сразу добавить несколько стилей:

$('element').css({'color':'red', 'border':'#555 solid thin'});

Ответ 5

Вы можете настроить видимость элементов на "скрытый", затем применить стили и затем снова сделать видимыми.