Web前端开发笔记38——事件三要素、操作元素、样式修改、属性值的获取设置和移除

本文介绍了如何使用JavaScript进行DOM操作，包括改变元素内容、修改属性及表单属性等实用技巧，并展示了如何通过修改样式实现动态效果。

1.改变元素内容：

2.innerText和innerHTML区别：

innerText不识别元素标签，但是innerHTML可以。

3.修改属性：

4.修改表单属性：

5.this的使用，可以使用this来表示当前对象。

var textPut = document.getElementById('textline');
    var btn1 = document.getElementById('btn1');
    btn1.onclick = function () {
        textPut.value = 'i changed!';
        this.disabled = true;
    }

6.通过修改input的type来修改其为text或者password类型。

7.css样式的修改示例如下：

var div1 = document.querySelector('#div1');
    var flag = 0;
    div1.onmouseover = function () {
        if (flag == 0) {
            this.style.fontSize = '30px';
            this.style.color = 'rgb(224,142,142)';
            this.style.backgroundColor = 'rgb(198,174,59)';
            flag = 1;
        }

    }
    div1.onmouseout = function () {
        if (flag == 1) {
            this.style.fontSize = '20px';
            this.style.color = 'rgb(198,174,59)';
            this.style.backgroundColor = 'rgb(181, 224, 209)';
            flag = 0;
        }
    }

8.但是，我们如果出现样式很多的情况一般不这样写，我们可以选择className修改样式属性：

我们可以预先写一个样式表，然后使用element.className='样式名'；来调用即可。示例：

var div1 = document.querySelector('#div1');
    var flag = 0;
    div1.onmouseover = function () {
        if (flag == 0) {
            this.className = 'div1 mouseon';
            flag = 1;
        }
    }
    div1.onmouseout = function () {
        if (flag == 1) {
            this.className = 'div1 mouseout';
            flag = 0;
        }
    }

9.获取元素的属性值：element.属性名。