JavaScript(二)

  • A+
所属分类:Web前端
摘要

改变元素样式的方式:外部样式表、内部样式表、行内样式。 获取节点的方式:


属性、样式操作

改变元素样式的方式:外部样式表、内部样式表、行内样式。

获取元素的显示样式

获取节点的方式:

通过id获取:document.getElementById()
通过选择器来获取:document.querySelector(),document.querySelectorAll()
通过class名字获取:document.getElementsByClassName()
通过标签名获取:document.getElementsByTagName()
通过name获取:document.getElementsByName()

用classList来操作类名

添加类名: .classList.add()  

移除类名: .classList.remove()
切换类名(有则移除,没有则添加): .classList.toggle()

let oWrap = document.getElementById("wrap");      //不标准的写法     // oWrap.style = "width: 300px";      //style 这个合法的标签属性很特殊     console.log( oWrap.style );      oWrap.style.width = "300px";     oWrap.style.height = "200px";     oWrap.style.backgroundColor = "red";   //样式操作 let oWrap = document.getElementById("wrap");      oWrap.onclick = function(){       // oWrap.style.width = "500px";        //在事件函数里面,可以用 this来代替oWrap       this.style.width = "500px";     }; //变相操作样式 let oWrap = document.getElementById("wrap");      oWrap.onclick = function(){       //添加名字,点击时,更换名字生成样式       this.className = "fly";     };