属性,事件,获取元素样式

116 阅读1分钟

属性:

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 )