js获取元素宽、高、边框。。。。等等css属性

element.style.height 获取的是内联属性（即： 标签内设置的style）,也就是说如果是在 css中设置的，获取不到。 通常只用来设置样式。 element.offsetHeight element.scrollHeight element.clientHeight 获取到的结果都是Number，不带单位 clientWidth 获取元素可视部分的宽度，即 CSS 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域 clientHeight 获取元素可视部分的高度，即 CSS 的 height 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域 offsetWidth 元素在页面中占据的宽度总和，包括 width、padding、border 以及滚动条的宽度 offsetHeight 元素在页面中占据的高度总和，包括 height、padding、border 以及滚动条的宽度 scrollWidth 当元素设置了 overflow:scroll 样式属性时，元素的总宽度，也称滚动宽度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域 scrollHeight 当元素设置了 overflow:scroll 样式属性时，元素的总高度，也称滚动高度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域 window.getComputedStyle 返回的是元素所有的样式属性 语法： let ele = document.getElementById('id') window.getComputedStyle(ele, [伪类]) /* 第二个参数可选（用于获取伪元素）例子如下：*/ window.getComputedStyle(ele, 'after') // 获取到ele元素的after伪元素 返回值 ：CSSStyleDeclaration 类型的对象 详情 获取到的结果都是String，带单位 let csd = window.getComputedStyle(ele) /* 无论用哪种，都得用驼峰形式 即 background-color => backgroundColor */ /* 取值方式 1 :直接点出来就行 */ csd.backgroundColor /* 取值方式 2 */ csd.getPropertyValue('backgroundColor') /* 补充 */ // 获取指定样式是否设置 important csd.getPropertyPriority('backgroundColor')

本文章由javascript技术分享原创和收集