18.Web API 实战：元素与表单属性的获取和修改

目录

一、获取/修改元素属性

[1. 图片元素属性操作示例](#1. 图片元素属性操作示例)

[2. 输入框与图片的交互示例](#2. 输入框与图片的交互示例)

二、获取/修改表单元素属性

[1. 代码示例：切换按钮的文本](#1. 代码示例：切换按钮的文本)

[2. 代码示例：点击计数](#2. 代码示例：点击计数)

[3. 代码示例：全选/取消全选按钮](#3. 代码示例：全选/取消全选按钮)

---

一、获取/修改元素属性

可以通过 Element对象的属性来直接修改，就能影响到页面显示效果。

1. 图片元素属性操作示例

HTML 代码：

<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
  var img = document.querySelector('img');
  console.dir(img);
</script>

2. 输入框与图片的交互示例

HTML 代码：

<body>
  <input type="text" onkeyup="myOnkeyUp()">
  <span>这是一个span标签</span>
  <img src="../向右小.png" alt="图片加载失败" title="这是一个提示图片" width="100px" height="100px">
</body>

JavaScript 代码：

<script>
let img = document.querySelector('img')
console.dir(img)
img.title = "这是已经修改完毕的title"
img.onclick = function() {
  alert("你已经点击了这个图片")
}
</script>

二、获取/修改表单元素属性

表单（主要是指 input标签）的以下属性都可以通过 DOM 来修改：

• ++value：input的值。++

• disabled：禁用。

• ++checked：复选框会使用。++

• selected：下拉框会使用。

• type：input的类型（文本、密码、按钮、文件等）。

1. 代码示例：切换按钮的文本

假设这是个播放按钮，在 "播放" - "暂停" 之间切换。

HTML 代码：

<body>
  <input class="btn" type="button" value="播放" onclick="Onclick()">
</body>

JavaScript 代码：

<script>
let btn = document.querySelector('.btn')
// 当按钮的 value等于 播放，此时将按钮 value变成暂停
// 否则变成播放
function Onclick() {
  if(btn.value == "播放") {
    btn.value = "暂停"
  } else {
    btn.value = "播放"
  }
}
</script>

2. 代码示例：点击计数

使用一个输入框输入初始值（整数），每次点击按钮，值 +1。

HTML 代码：

<body>
<input class="input" type="text" name="" id="" value="0">
<input class="add" type="button" value="+1" onclick="Add()">
<input class="min" type="button" value="-1" onclick="Min()">
</body>

JavaScript 代码：

<script>
function Add() {
  let input_element = document.querySelector('.input')
  input_element.value = parseInt(input_element.value) + 1
}
function Min() {
  let input_element = document.querySelector('.input')
  input_element.value = parseInt(input_element.value) - 1
}
</script>

3. 代码示例：全选/取消全选按钮

• 点击全选按钮，则选中所有选项。

• 只要某个选项取消，则自动取消全选按钮的勾选状态。

HTML 代码：

<input class="all" type="checkbox" onclick="SelectAll()">选中全部
<input type="checkbox" class="select">选项1
<input type="checkbox" class="select">选项2
<input type="checkbox" class="select">选项3
<input type="checkbox" class="select">选项4

JavaScript 代码：

<script>
let all = document.querySelector('.all')
let select = document.querySelectorAll('.select')
console.dir(all)
function SelectAll() {
  for(i = 0; i < select.length; i++) {
    select[i].checked = all.checked
  }
}
for(i = 0; i < select.length; i++) {
  select[i].onclick = function() {
    all.checked = IsSelectAll(select)
  }
}
function IsSelectAll(select) {
  for(i = 0; i < select.length; i++) {
    if(select[i].checked == false) {
      return false
    }
  }
  return true
}
</script>