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