HTML-JS操作样式属性和事件

一、操作样式属性

1. innerH：ML:可以添加 文字内容以及标签内容 ，不仅能对文字进行修饰，还能添加标签内容。

2.  innerText：可以添加、修改标签内的文字内容，只能对文字进行修饰，无法对标签进行修改。

 <div class="one">123</div>
    <button class="change">点我切换</button>
    <button class="change2">点我切换</button>


 var a = document.querySelector('div');
        console.log(a);
        
        a.innerText = '<p>我是修改过后的文字,通过innerText</p>';
        a.innerHTML = '<p>我是二次修改过后的文字,通过innerHTML</p>';

3.  getAttribute：获取元素的某个属性的值,语法:ele.getAttribute('属性名称')。

 var b = a.getAttribute('class');
        console.log(b);

4.  setAttribute：给元素设置属性、属性值, 语法: ele.setAttribute('属性名称','属性值')。

5. removeAttribute ：移除元素属性。

6. style：设置元素的样式  , 语法： ele.style.样式属性名 = '属性值'。

 var change = document.querySelector('.change');
        var change2 = document.querySelector('.change2');
        // 添加监听事件
        change.addEventListener('click', function () {
            a.setAttribute('class', 'two');
            a.style.backgroundColor = 'red';
            a.style.width = '400px';
        })

7. className ：设置元素的类名。

 <div class="one">123</div>
    <button class="change">点我切换</button>
    <button class="change2">点我切换</button>


 var a = document.querySelector('div');
        console.log(a);
        
        a.innerText = '<p>我是修改过后的文字,通过innerText</p>';
        a.innerHTML = '<p>我是二次修改过后的文字,通过innerHTML</p>';

二、js事件

1.事件三要素

(1)事件源：网页元素。

(2)事件类型：用户与浏览器交互的行为，鼠标点击、输入框选中等。

(3) 事件处理程序：事件发生后的处理程序(函数/方法)。

2.绑定事件

(1)onclick：同一个元素同一个事件只能定义一个监听函数。

语法： ele.事件类型 = 事件处理程序(函数) function(){}。

解绑方法： ele.事件类型 = false。

<div>123</div>
    <button>点击</button>
    <button class="btn2">点击</button>
    <button onclick="alert('111')">点击</button>



 var a = 5;
        var btn = document.querySelector('button');
        btn.onclick = function () {
            alert('我们单击了按钮一');
            if (a <= 0) {
                btn.onclick = false;
            }
            a--;
            console.log(a);
        }

(2)addEventListener：可针对同一个元素，添加多个监听处理函数。

语法：ele.addEventListener('事件类型',事件处理函数 function(){})。

解绑方法：ele.removeEventListener('事件类型',事件处理函数名)。

 var btn2 = document.querySelector('.btn2');
        btn2.addEventListener('click', function a() {
            alert('点击第二个按钮');
            btn2.removeEventListener('click', a);//移除元素a的点击属性
        });

(3)行内标签绑定：不推荐。