一、样式设置
1.通过标签的Style属性来做设置
var block = document.getElementById("block") block.style.width = "80px" block.style.height = "80px" block.style.backgroundColor = "red"
这里通过获取标签的style属性对标签进行样式处理
2.通过类名来设置
block.className = 'changeStyle'
这里是先在css文件中设置好类的样式处理,直接调用就行了,无需再在js中对样式进行描述
二、文本处理
1.textContent(基本文本处理)
block.textContent = "hhhh"
这里是对标签的内容进行修改,这里使用innerText属性也可以实现
2.inner HTML
block.innerHTML = 'good <span>生成标签</span>'
innerHTML除了能修改文本外,还能生成一个全新的标签(区别于textContent:textContent只能处理文本,不能生成标签)
三、事件处理
Javascript在网页中进行最多的功能就是进行交互处理,交互处理就是告诉标签用户进行哪些操作要进行相应的响应处理
block.addEventListener('click', function () { alert("Click!!")//是由浏览器支持的弹窗方式 }) block.addEventListener('click', function () { alert("Click again!!") })//第二个弹窗,不会出现覆盖情况
这里点击后会接续出现两次弹窗,虽然语句一样。如果使用onClick,则第一次会被第二次覆盖
block.onclick = function(){ alert("Click")//被覆盖了 } block.onclick = function(){ alert("Click again") }