JavaScript操作属性和样式

一、元素属性的操作

1.removeAttribute

删除一个属性 element.removeAttribute(‘class’,)

2.getAttribute

获取某一个属性的值 element.getAttribute(‘class’)

3.setAttribute

建立一个属性，并同时给属性捆绑一个值 element.setAttribute(‘class’,’box’)

二、Style样式操作

为元素添加CSS样式且添加的为行内样式 element.style.样式=‘值’

三、类属性操作

1.className

专门用来添加元素的类名 element. className=‘值’
专门用来获取元素类名称 element.className

四、JavaScript事件

1.事件三要素

事件源： 在谁身上绑定事件
事件类型： 什么事件
事件处理函数： 当行为发生的时候，执行哪一个函数

2.绑定事件

2.1在DOM元素中直接绑定事件

第一种，通过直接在input标签内添加onclick属性。

   <input type="button" value="按钮" onclick="test()" />

function test(){
      				console.log("HelloWorld!");
      }

2.2在JS代码中绑定事件

		<input type="button" value="按钮" id="button"/>

document.getElementById("button").onclick = function(){
				console.log("HelloWorld!");
			}

2.3使用监听函数addEventListerner绑定事件

    <input type="button" value="按钮" id="button" />

document.getElementById("button").addEventListener("click", function () {
        console.log("HelloWorld!");
      });

2.4解绑事件

2.4.1直接删除法

对象.οnclick=false;

2.4.2使用addEventListener绑定事件，使用removeEventListener删除绑定事件

3.常用事件类型

onclick：鼠标单击时触发此事件

ondblclick：鼠标双击时触发此事件

onmouseover：鼠标移动到某个设置了此事件的元素上时触发此事件

onmouseout：鼠标从某个设置了此事件的元素上离开时触发此事件

onfocus：当某个元素获得焦点时触发此事件

onkeydown：当键盘上的某个按键被按下时触发此事件

onkeyup：当键盘上的某个按键被按下后弹起时触发此事件

onblur：当前元素失去焦点时触发此事件