DOM viewport

今天学到了一个新的技巧,用鼠标点击 chrome dev tools 的 Elements 中的标签以后 ,使用 $0 就可以获取到鼠标所点击的 DOM 节点

然后总结一下 Dom Scroll 的 api。

常用的就是这几个。

  • $0.scrollBy(30, 30);

  • $0.scrollTo(0,100);

  • $0.scrollTop;

  • $0.scrollLeft;

  • $0.scrollHeight

  • $0.getClientRects()

    这个可以取出来精确的位置,这里 inline 元素是会产生盒子的,我们可以一个一个的数出来,但是伪元素生成的盒子不会被算到 rects 里面。

    rect:『矩形』

  • $0.getBoundingClientReact()

    getBoundingClientReact() 与 getClientRects()的区别主要就是一个是当前包裹的区块的大小、另外一个是针对 windows 的大小。

    做拖拽的时候,就是靠这个 getBoundingClientReact()来计算特定的位置,然后通过 transform 来进行移动。

  • window.innerHeight

  • window.innerWidth

    视口的尺寸。

  • window.outerHeight

  • window.outerWidth

    这个基本上用不到,基本上都不用你去计算整个浏览器的高宽的

  • window.devicePixelRatio

    物理像素跟实际像素的比值,这个算是重点,要记忆。

  • document.documentElement.getBoundingClientReact();

    通过这个也可以获取到innerHeight 与 innerWidth

来段好玩的代码,手写 Object 的 forEach,不过就是复杂的嵌套对象还不支持,要支持的话要写个递归

  Object.prototype.foreach = function (func) {
    Object.keys(this).forEach((key) => {
      func(key, this[key]);
    });
  };
  let obj = { a: 1, b: 2 };
  obj.foreach((key, v) => console.log(v));
posted @ 2020-07-10 14:16  jaiodfjiaodf  阅读(128)  评论(0编辑  收藏  举报