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

Question

Я знаю, что изменение стиля элемента через JavaScript напрямую вызовет перекомпоновку. Однако мне было интересно, можно ли изменить несколько значений стилей в пакете с помощью только одного перекомпоновки?

Answer 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);
}

Answer 2

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

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

Answer 3

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

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

и затем присвоить его свойству className

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

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

Answer 4

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

Answer 5

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

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