CSS & Style

  • 2.1 CSS

    • Get style

      1. // jQuery
      2. $el.css("color");
      3. // Native
      4. // 注意:此处为了解决当 style 值为 auto 时,返回 auto 的问题
      5. const win = el.ownerDocument.defaultView;
      6. // null 的意思是不返回伪类元素
      7. win.getComputedStyle(el, null).color;
    • Set style

      1. // jQuery
      2. $el.css({ color: "#ff0011" });
      3. // Native
      4. el.style.color = '#ff0011';
    • Get/Set Styles

      注意,如果想一次设置多个 style,可以参考 oui-dom-utils 中 setStyles 方法

    • Add class

      1. // jQuery
      2. $el.addClass(className);
      3. // Native
      4. el.classList.add(className);
    • Remove class

      1. // jQuery
      2. $el.removeClass(className);
      3. // Native
      4. el.classList.remove(className);
    • has class

      1. // jQuery
      2. $el.hasClass(className);
      3. // Native
      4. el.classList.contains(className);
    • Toggle class

      1. // jQuery
      2. $el.toggleClass(className);
      3. // Native
      4. el.classList.toggle(className);
  • 2.2 Width & Height

    Width 与 Height 获取方法相同,下面以 Height 为例:

    • Window height

      1. // window height
      2. $(window).height();
      3. // 不含 scrollbar,与 jQuery 行为一致
      4. window.document.documentElement.clientHeight;
      5. // 含 scrollbar
      6. window.innerHeight;
    • Document height

      1. // jQuery
      2. $(document).height();
      3. // Native
      4. const body = document.body;
      5. const html = document.documentElement;
      6. const height = Math.max(
      7. body.offsetHeight,
      8. body.scrollHeight,
      9. html.clientHeight,
      10. html.offsetHeight,
      11. html.scrollHeight
      12. );
    • Element height

      1. // jQuery
      2. $el.height();
      3. // Native
      4. function getHeight(el) {
      5. const styles = this.getComputedStyle(el);
      6. const height = el.offsetHeight;
      7. const borderTopWidth = parseFloat(styles.borderTopWidth);
      8. const borderBottomWidth = parseFloat(styles.borderBottomWidth);
      9. const paddingTop = parseFloat(styles.paddingTop);
      10. const paddingBottom = parseFloat(styles.paddingBottom);
      11. return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
      12. }
      13. // 精确到整数(border-box 时为 height - border 值,content-box 时为 height + padding 值)
      14. el.clientHeight;
      15. // 精确到小数(border-box 时为 height 值,content-box 时为 height + padding + border 值)
      16. el.getBoundingClientRect().height;
  • 2.3 Position & Offset

    • Position

      获得匹配元素相对父元素的偏移

      1. // jQuery
      2. $el.position();
      3. // Native
      4. { left: el.offsetLeft, top: el.offsetTop }
    • Offset

      获得匹配元素相对文档的偏移

      1. // jQuery
      2. $el.offset();
      3. // Native
      4. function getOffset (el) {
      5. const box = el.getBoundingClientRect();
      6. return {
      7. top: box.top + window.pageYOffset - document.documentElement.clientTop,
      8. left: box.left + window.pageXOffset - document.documentElement.clientLeft
      9. }
      10. }
  • 2.4 Scroll Top

获取元素滚动条垂直位置。

  1. // jQuery
  2. $(window).scrollTop();
  3. // Native
  4. (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;