javascript中style.width和offsetWidth及currentStyle和getComputedStyle有什么区别

Question

javascript中style.width和offsetWidth及currentStyle和getComputedStyle有什么区别
javascript中style.width和offsetWidth及currentStyle和getComputedStyle有什么区别

Answer 1

style.width 就是指内容宽度
offsetWidth：
元素视图属性
* offsetWidth 水平方向 width + 左右padding + 左右border-width
* offsetHeight 垂直方向 height + 上下padding + 上下border-width
currentStyle 就是当前 dom的style样式
getComputedStyle： window.getComputedStyle() 方法的使用 | 菜鸟教程 一、getComputedStyle() 用法 document.defaultView.getComputedStyle(element[,pseudo-element]); 或者 window.getComputedStyle(element[,pseudo-element]); 首先是有两个参数，元素和伪类。第二个参数不是必须的，当不查询伪类元素的时候可以忽略或者传入 null。 使用示例： let my_div = d.. https://www.runoob.com/w3cnote/window-getcomputedstyle-method.html
getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法，均需要注意 float 属性。

而不同点就是：

element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式
我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式。