通过元素ID修改对应元素的背景色

在进入正题之前，首先引入 document
document 是可以获取 DOM 上面的所有节点

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li id="tesst"></li>
    <!-- li{我是第$个元素}*5 -->
    <!-- li#${我是第$个元素}*5 -->
    <li id="1" name="11">我是第1个元素</li>
    <li id="2" name="12">我是第2个元素<div>我是第三个元素</div></li>
  </ul>
  <button id="btn_id" onclick="setColor()" >点我修改背景色</button>
  
  
  <script>
    // 根据id 获取元素节点
    var d = document.getElementById('2')
    // 根据name 获取元素节点
    var dname = document.getElementsByName('12')
    // 根据标签名 获取元素节点
    var dtagname = document.getElementsByTagName('li')
    console.log(d)
    console.log(dname)
    console.log(dtagname)
    console.log(typeof(d))
    console.log(d.innerHTML)
    console.log(d.innerText)
    console.log(d.nodeName)
    console.log(d.nodeType)
    console.log(d.nodeValue)

    unis = 1
    function setColor(){
      unis = !unis
      // 给background赋值
      d.style.background=unis?"yellow":"blue"
    }

    x = 0
  </script>
</body>

</html>

输出如下

posted @ 2021-01-30 15:47  day-12-19  阅读(316)  评论(0)    收藏  举报