DOM间接操作CSS样式

145 阅读1分钟

DOM 无法操作 CSS 样式表 他操作的其实是 element 上的 style 属性

div.style.cssFloat //float 是保留字因此前面加上 css

window.getComputedStyle(ele,null)

function getStyles(elem, prop) {
  if (window.getComputedStyle) {
    if (prop) {
      return window.getComputedStyle(elem, null)[prop];
    } else {
      return window.getComputedStyle(elem, null);
    }
  } else {
    if (prop) {
      return elem.currentStyle[prop];
    } else {
      return elem.currentStyle;
    }
  }
}

tips:

  • 参数里的 null 可以换成伪元素标签名 after before 等,但是这里读出来的伪元素属性只是可读的,如果想更改伪元素属性需要写个新的伪元素类覆盖掉之前的
  • 为什么不使用 offsetWidth/offsetHeight 因为这俩会把 padding 的距离也加上