Làm cách nào để chọn tất cả trẻ em của một phần tử có javascript và thay đổi thuộc tính CSS?

Question

Tôi đang làm việc trên một dự án có một div với 32 trẻ em. Tôi cần phải tạo một trình đơn thả xuống sẽ thay đổi nền của mỗi div và cha mẹ. Đối với các phần khác của dự án mà không có con, tôi đã được sử dụng đoạn mã sau:

function changediv(color) { 
document.getElementById('div1').style.background = color; 
} 

HTML:

<select> 
<option onClick="changediv('#555');">Hex</option> 
<option onClick="changediv('blue');">Colorname</option> 
<option onClick="changediv('url(example.com/example.png)');">Image</option> 
</select> 

tôi có thể chỉ cần thêm một ID khác nhau cho mỗi đứa trẻ (id1 , id2, id3, ...), nhưng có 32 trẻ em và không chỉ tôi sẽ phải thêm 32 ID, mà còn 32 dòng Javascript. Có phải là một cách tốt hơn; bằng cách nào đó chọn trẻ em hoặc thậm chí thay đổi mã CSS thực tế để chọn trẻ em.

Cảm ơn, Ian

Answer 1

Trong khi điều này có thể được thực hiện trong một dòng với JQuery, tôi giả sử bạn đang không sử dụng JQuery - trong trường hợp này, mã của bạn sẽ là:

var nodes = document.getElementById('ID_of_parent').childNodes; 
for(var i=0; i<nodes.length; i++) { 
    if (nodes[i].nodeName.toLowerCase() == 'div') { 
     nodes[i].style.background = color; 
    } 
} 

Xem http://jsfiddle.net/SxPxN/ cho một ví dụ nhanh tôi tạo ra - Click vào "thay đổi 'em" để xem nó trong hành động

Answer 2

Hãy thử sử dụng bên dưới mã:

var nodes = document.getElementById('ID_of_parent').getElementsByTagName("div"); 
for(var i=0; i<nodes.length; i++) { 
    nodes[i].style.background = color; 
}