JS——网页特效设置

一、样式设置

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")
}