属性:
width 只是content的宽度
console.log( window.getComputedStyle(divDom,null).width )
offsetWidth = content 宽度 + 左右的padding + 左右的border
clientWidth = content 宽度 + 左右的padding
在正常文档流下 offsetLeft = body的margin-left + divDom的margin-left;
脱离文档流的情况下 offsetLeft = divDom的left + divDom的margin-left;
在正常文档流下 offsetTop = body的margin-top
脱离文档流的情况下 offsetTop = divDom的top + divDom的margin-left
offsetParent 自己相对于谁(父元素)偏移
let c = document.getElementsByClassName('c')[0];
c是绝对定位 是相对于divDom偏移的 所以他的偏移父元素是divDom
offsetParent 如果子元素的父元素是已经定位(relative,absolute,fixed)的元素,
那么他的offsetParent就是已经定位的父元素
如果不是已经定位的元素,那么他的offsetParent就是body
获取滚动条距离顶部的高度
function getScroll(){console.log( document.documentElement.scrollTop );}
滚动条 滚动事件
document.onscroll = function (){console.log( document.documentElement.scrollTop );}
事件:
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
onmousedown 鼠标按钮抬起的时候触发
获取元素样式:
通过style在行内样式上获取样式
使用style获取样式 写的什么 就能获取到什么不会转成rgb 和 出现其他的样式
console.log('style',div.style.color )console.log('style',div.style.background )
style是获取不到在内部样式上或者外部样式上的样式的
console.log( div.style.color )
font-size js中要是用驼峰的方式获取
console.log( div.style.fontSize )
使用window.getComputedStyle可以获取行内、内部、外部的所有样式
但是 获得color是rbg格式的,获取的background是所有属性
console.log( window.getComputedStyle(div,null).color )console.log( window.getComputedStyle(div,null).fontSize )console.log( window.getComputedStyle(div,null).background )console.log( window.getComputedStyle(div,null).height )