2020.10.29 操作元素

操作元素

表单域的元素 只能用id选择元素

element.src = ’ ';

var d = document.getElementById('d');
        var z = document.getElementById('z');
        var img = document.querySelector('img');
        d.onclick = function() {
            img.src = 'https://i0.hdslb.com/bfs/archive/f3b55c8391052985cf465a67ff7e7b797fb2ac1b.png@880w_388h_1c_95q';
            img.title = 'ddd';
        }
        z.onclick = function() {
            img.src = 'https://i0.hdslb.com/bfs/archive/a317f66b5568fdf7cb249419fb3c8a390b6652c1.jpg';
        }

修改表单域的属性

表单域的元素只能用ID选择器选择

disabled的使用：使用过后就不能使用

   var input = document.getElementsByClassName('input');
        var btn = document.getElementsByClassName('btn');
        btn.onclick = function() {
            input.value = '您已经注册';
            btn.disabled = true;
        }

disabled = true;

改变某个元素的样式属性

1element.style.样式属性（注意样式属性要用驼峰命名法）
2属性element的选择只能用querySelector()
3.JS修改的是属性的行内样式所以优先级高

 var div = document.querySelector('div');
        div.onclick = function() {
            this.style.backgroundColor = 'green';
        }

新操作：onfocus(得到焦点) ，onblur（失去焦点）

    <input type="text" value="手机" class="input">
    <script>
        var input = document.querySelector('.input');

        input.onfocus = function() {
            if (input.value == '手机') {
                input.value = ' ';
            }
            input.style.color = '#333'

        }
        input.onblur = function() {
            input.style.color = '#999';

            if (input.value == '') {
                input.value = '手机';
            }
        }
    </script>

注意：value 的值判断必须要加上父元素

input .value == ‘手机’;
input.value ==’ ';