我使用此 JavaScript 代码来选择所有 DIV 并更改其颜色。我不想改变标题中 DIV 的颜色。此任务的目的是学习 HTML5、DOM、Javascript 和 getElementsByTagName 函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<div>divv in header</div>
</head>
<body onload="Onload()">
<div>bla</div>
<div id="Div1">bla</div>
<div id="Div2">bla
<div id="Div4">div in div</div>
</div>
<div id="Div3" class="diiiivvv">bla</div>
</body>
</html>
<script type="text/javascript">
function Onload() {
var h = document.head;
var dh = h.getElementsByTagName('div');
if (dh.length != 0) {
dh[0].style.backgroundColor = 'red'; //fail
}
var d = document.getElementsByTagName('div');
for (var i = 0; i < d.length; i++) {
d[i].style.backgroundColor = 'blue';
};
}
</script>
你的问题出在哪里？你刚刚选择了 head 中的 div 是正确的：
var h = document.head;
var dh = h.getElementsByTagName('div');
// or short:
var dh = document.head.getElementsByTagName('div');
那么为什么不对 body 元素使用相同的方法呢：
var db = document.body.getElementsByTagName('div');
getElementsByTagName()您可能会发现最好使用 CSS 选择器和适当的样式规则来访问所需的元素。这是一个例子：
<script type="text/javascript">
function applyRule(selectorText, value) {
// Get the style sheets - note sytleSheets is a live HTMLCollection
var sheet, sheets = document.styleSheets;
// Add a style sheet if there isn't one in the document
if (!sheets.length) {
sheet = document.createElement('style');
sheet.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(sheet);
}
// Get the last style sheet
sheet = sheets[sheets.length - 1];
// Add the rule - W3C model
if (sheet.insertRule) {
sheet.insertRule(selectorText + ' {' + value + '}', sheet.cssRules.length);
// IE model
} else if (sheet.addRule) {
sheet.addRule(selectorText, value, sheet.rules.length);
}
}
</script>
<div>here is a div
<button onclick="applyRule('div','background-color: red')">Change div background colour</button>
</div>