yuque_diagram.jpg

目的

学习了这部分知识，可以操作元素的属性。
比如，可以修改 <img src="" /> 的 src 属性值，从而实现切换图片的效果；
比如，可以设置 <button>xxx</button> 的 disabled 属性，从而实现按钮的禁用和解除禁用效果；
……

获取|修改属性语法

  1. // 语法
  2. // 1. 找到元素
  3. let img = document.querySelector('img')
  5. // 2. 获取元素的属性
  6. let 属性值 = img.属性名
  8. // 3. 修改元素的属性
  9. img.属性名 = '新的值'

演示代码

  1. <body>
  2.   <img src="images/1.webp" alt="华仔">
  4.   <script>
  5.     // 1. 找到页面的 img 
  6.     let x = document.querySelector('img')
  8.     // 2. 获取图片的 alt 属性值
  9.     // console.log(x.alt)
  11.     // 3. 修改元素的属性值
  12.     // x.src = '新的值'
  13.     x.src = 'images/2.webp'
  14.   </script>
  15. </body>

特殊属性(值)说明

正常的属性是这样的 href="值" 或者 src="./images/1.webp"
有些属性是这样的 checked、disabled、selected，直接就是一个属性名，没有值
如果需要设置这样的属性，怎么办？获取这样的属性值，将会得到什么？

  • 对于这样的属性，获取将会得到一个布尔值（true或者false）

  • 设置这样的属性，也需要赋值 true 或 false

    1. <body>
    3. <button>这是一个按钮</button>
    5. <input type="checkbox">
    7. <script>
    8.   // 1. 获取到button
    9.   let btn = document.querySelector('button')
    11.   // 2. 设置 button 为 禁用
    12.   btn.disabled = true
    14.   // -------------------------------------------------------------
    15.   // 1. 获取得到 input
    16.   let ipt = document.querySelector('input')
    18.   // 2. 获取input的checked
    19.   console.log(ipt.checked)
    21.   // 3. 设置input勾选
    22.   ipt.checked = true
    23. </script>
    24. </body>

    案例：随机更换图片

    ```javascript

    获取|修改标签的属性 - 图2

```