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

红太狼 2024-05-06 21:24 79阅读 0赞

![previewfile\_2111405729][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>

**运行效果**  
![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>

**运行效果**  
![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>

运行结果  
![image-20240305190655066][]

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

第二种写法

### **类名样式操作** ###

修改元素的 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>

**运行效果**

白天模式  
![image-20240305195827833][]

点击切换，为夜间模式  
![image-20240305200016085][]

再点击切换为白天模式  
![image-20240305195827833][image-20240305195827833 1]

[previewfile_2111405729]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/05603c43b1274fb1af0de9a2542f1831.jpeg
[image-20240305180307287]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/b320ceecc23844aea732f17fe093e811.png
[image-20240305180336532]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/0a34b88e2e034382a95f856bf97f4274.png
[image-20240305181558378]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/8d80cc3353894f389e34f26183bbcda4.png
[image-20240305190655066]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/56878d67f5024d9b95736b8b9f0c6b83.png
[image-20240305195827833]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/23e62f4605a8464c9a41a5f81b2f2537.png
[image-20240305200016085]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/c0bbefec5e8a4d76bc39d9cbd67e7e01.png
[image-20240305195827833 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/a81950b3a50e49189948c7293986647d.png