发布：2024/12/23 20:59:45作者：管理员 来源：本站 浏览次数：135
JS 获取和修改表单元素属性
表单(主要是指 input 标签)的以下属性都可以通过 DOM API来修改
value: input 的值
checked: 复选框会使用
selected: 下拉框会使用
disabled: 禁用
type: input 的类型(文本, 密码, 按钮, 文件等)
修改 input 的值 => value
示例1: 点击切换状态的按钮
<body>
<input class="btn" type="button" value="播放" onclick="Onclick()">
</body>
<script>
let btn = document.querySelector('.btn')
// 当按钮的值 value 等于播放，此时将按钮 value 变成暂停
// 否则变成播放
function Onclick() {
if(btn.value == "播放") {
btn.value = "暂停"
}else {
btn.value = "播放"
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
运行效果
image-20240305180307287
点击之后
image-20240305180336532
示例2: 点击计数，点击+1，数值加1；点击-1，数值减1
<body>
<input class="input" type="text" name="" id="" value="0">
<input class="add" type="button" value="+1" onclick="Add()">
<input class="sub" type="button" value="-1" onclick="Sub()">
</body>
<script>
function Add() {
let input_element = document.querySelector('.input')
input_element.value = parseInt(input_element.value) + 1
}
function Sub() {
let input_element = document.querySelector('.input')
input_element.value = parseInt(input_element.value) - 1
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
运行效果
image-20240305181558378
修改表单属性 checked 的值
示例: 复选框
1.点击全选按钮, 则选中所有选项
2.只要某个选项取消, 则自动取消全选按钮的勾选状态
示例代码
<body>
<input class="all" type="checkbox" onclick="SelectAll()">选中全部<br>
<input class="select" type="checkbox">选项1<br>
<input class="select" type="checkbox">选项2<br>
<input class="select" type="checkbox">选项3<br>
<input class="select" type="checkbox">选项4<br>
</body>
<script>
let all = document.querySelector('.all')
let select = document.querySelectorAll('.select')
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
运行结果
image-20240305190655066
JS 获取和修改样式属性
CSS 中指定给元素的属性, 都可以通过 JS 来修改
行内样式操作
“行内样式”, 通过 style 直接在标签上指定的样式
注：它的优先级很高，适用于改的样式少的情况
element.style.[属性名] = [属性值]; // 第一种写法
element.style.cssText = [属性名+属性值];// 第二种写法
1
2
特点：这种方式修改只影响到特定样式，其他内联样式的值不变
示例代码：点击文字则放大页面上的字体
第一种写法
<body>
<div style="font-size: 10px;" onclick="changeSize()">哈哈哈</div>
</body>
<script>
function changeSize() {
let elememt = document.querySelector('div')
let size = parseInt(elememt.style.fontSize) + 10
elememt.style.fontSize = size + "px"
}
</script>
1
2
3
4
5
6
7
8
9
10
第二种写法
<body>
<div style="font-size: 10px;" onclick="changeSize()">哈哈哈</div>
</body>
<script>
function changeSize() {
let elememt = document.querySelector('div')
let size = parseInt(elememt.style.fontSize) + 10
elememt.style.cssText = "font-size:"+ size + "px"
}
</script>
1
2
3
4
5
6
7
8
9
10
类名样式操作
修改元素的 CSS 类名，适用于要修改的样式很多的情况
element.className = [CSS 类名];
1
示例代码：通过点击页面实现阅读页面的夜间模式和白天模式的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.light {
background-color: aliceblue;
color: black;
width: 100%;
height: 100%;
}
body, html {
width: 100%;
height: 100%;
}
.dark {
background-color: black;
color: white;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="light" onclick="changeStyle()">
这个一段话<br>
这个一段话<br>
这个一段话<br>
这个一段话<br>
</div>
</body>
<script>
function changeStyle() {
let elememt = document.querySelector('div')
// 如果当前样式是白天模式，此时就将其样式切换成夜间模式
// 否则就将当前样式调整成白天模式
if(elememt.className == "light") {
elememt.className = "dark"
}else {
elememt.className = "light"
}
}
</script>
</html>
© Copyright 2014 - 2025 柏港建站平台 ejk5.com. 渝ICP备16000791号-4