DOM修改元素的样式

DOM修改元素的样式

利用dom修改元素样式的方法主要有两种
1.element.style.
注意：样式的名称采用驼峰式命名；
修改后的样式属于行内样式，权重比较高；

2.element.className
注意：通过修改类名，获得新的样式，这类方法一般适用于样式复杂多样的情况
新的类名的覆盖原来的类名，因此采用html5的新写法可以写俩个类名

<script>
        //1.element.style
        var input = document.querySelector('input')
        input.onfocus = function() {
            if (this.value === '手机') {
                this.value = '';
            }
            //获得焦点时吧文字变深色
            this.style.color = '#333'
        }
        input.onblur = function() {
            if (this.value === '') {
                this.value = '手机'
            }
            //失去焦点时吧输入的文字变成浅色
            this.style.color = '#ccc'
        }
        //2.element.className
       var div = document.querySelector('div');
        var index = 0;
        // console.log(div);
        //用className修改类名的时候会直接覆盖原来的类名，在一些特殊的情况下可以写叠加类名className='yellow pink'
        div.onclick = function() {
            if (index == 0) {
                this.className = 'yellow';
                index = 1;
            } else {
                this.className = 'pink';
                index = 0;
            }
        }
    </script>