Có cách nào để áp dụng nhiều kiểu CSS trong một lô để tránh nhiều lần lặp lại không?

Question

Tôi biết rằng phong cách của yếu tố thay đổi thông qua JavaScript trực tiếp sẽ gây ra một sự tái tạo. Tuy nhiên, tôi đã tự hỏi nếu nó có thể thay đổi nhiều giá trị phong cách trong một lô chỉ với một reflow?

Answer 1

Không trực tiếp nhưng có một số gợi ý tốt về giảm thiểu tác động của chỉnh lại dòng ở đây:

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

Nói tóm lại, hãy thử một cái gì đó như thế này:

Cách tiếp cận thứ hai là để xác định một thuộc tính phong cách mới cho phần tử, thay vì gán kiểu một cho một, một. Thông thường, điều này phù hợp với thay đổi động chẳng hạn như hoạt ảnh, nơi không thể biết trước các kiểu mới . Điều này được thực hiện bằng cách sử dụng thuộc tính cssText của đối tượng kiểu hoặc bằng cách sử dụng setAttribute. Internet Explorer không cho phép phiên bản thứ hai và cần phiên bản đầu tiên. Một số trình duyệt cũ hơn, bao gồm Opera 8, cần cách tiếp cận thứ hai và làm không hiểu đầu tiên. Vì vậy, cách dễ dàng là kiểm tra xem phiên bản đầu tiên có được hỗ trợ và sử dụng không, sau đó giảm quay lại phiên bản thứ hai nếu không.

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

Nếu bạn đang sử dụng jQuery, nó có một chức năng .css cho phép bạn thêm nhiều phong cách cùng một lúc:

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

Answer 3

Bạn có thể đặt tất cả các phong cách trong một CSS lớp

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

và sau đó gán nó cho thuộc tínhName class

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

Điều đó sẽ kích hoạt chỉ có một repaint/reflow

Answer 4

Bạn có thể thiết lập tầm nhìn của phần tử để 'ẩn', sau đó áp dụng các phong cách và sau đó làm cho nó có thể nhìn thấy một lần nữa.

Answer 5

sử dụng:

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