css属性readonly与disabled的区别

谁借莪１个温暖的怀抱￠ 2022-05-27 02:07 238阅读 0赞

## **一. 范围不同** ##

readonly 只对 <input> 和 <textarea> 标签有效

disabled 对所有表单元素都有效, 包括：<input>, <textarea>, <button>, <label>, <option>, <select>等

## 二. 程度不同 ##

readonly 只是将元素设置为只读，不可输入，对其它操作没有影响

disabled 阻止元素的一切操作。包括 获取焦点，点击事件等

## 三. 表单提交 ##

readonly 只是将元素设置为只读，不影响表单提交

disabled 设置了该属性的表单元素，值将不会随着表单一起提交

## 四. JavaScript操作 ##

设置了readonly和disabled的表单元素，用户无法再界面上改变它的值。但通过JavaScript是可以改变其值的，同样背景色，字体颜色等也可以通过JavaScript来改变。例如：下面的代码运行在chrome浏览器中时，点击“点我”后两个input框的字体颜色、背景色，值都会发生变化。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            input{
                height:30px;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input id="input1" type="text" value="1" readonly="true">
        <input id="input2" type="text" value="2" disabled="true">
        <input type="button" οnclick="test()" value="点我">
        <script>
            function test(){
                var input1 = document.getElementById('input1');
                var input2 = document.getElementById('input2');
    
                input1.style.cssText = 'color:red;background-color:green'
                input2.style.cssText = 'color:red;background-color:green'
    
                input1.value = 6;
                input2.value = 6
            }
        </script>
    </body>
    </html>