通过 JS 获取和修改表单元素属性和样式属性

previewfile_2111405729

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>

运行效果

点击之后

示例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>

运行效果

修改表单属性 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>

运行结果

JS 获取和修改样式属性

CSS 中指定给元素的属性, 都可以通过 JS 来修改

行内样式操作

“行内样式”, 通过 style 直接在标签上指定的样式
注：它的优先级很高，适用于改的样式少的情况

element.style.[属性名] = [属性值]; // 第一种写法
element.style.cssText = [属性名+属性值];// 第二种写法

特点：这种方式修改只影响到特定样式，其他内联样式的值不变

示例代码：点击文字则放大页面上的字体

第一种写法

<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>

第二种写法

<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>

类名样式操作

修改元素的 CSS 类名，适用于要修改的样式很多的情况

element.className = [CSS 类名];

示例代码：通过点击页面实现阅读页面的夜间模式和白天模式的切换

<!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>