html 如何从表体中选择所有div而不是从表头中选择？

xn1cxnb4 于 2023-01-15 发布在其他

关注(0)|答案(2)|浏览(157)

我使用这个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>

Html

来源：https://stackoverflow.com/questions/10116070/how-to-select-all-div-from-body-and-not-from-the-header

2条答案

按热度按时间

44u64gxh1#

你的问题在哪里？你刚刚正确地选择了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()方法可以应用于任何dom元素。

赞(0）回复(0）举报 2023-01-15

lxkprmvk2#

你可能会发现最好使用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>

赞(0）回复(0）举报 2023-01-15

我来回答

html 如何从表体中选择所有div而不是从表头中选择？

2条答案

相关问题

热门标签

最新问答