zoukankan      html  css  js  c++  java
  • 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));
    
  • 相关阅读:
    mysql 去除重复数据
    linux 相关命令
    mysql load data infile auto increment id
    《Head First 设计模式》读书笔记
    《NoSQL精粹》读书笔记
    linux 服务器丢包故障排查
    《高性能MySQL》 读书总结
    NAT穿透(UDP打洞)
    python函数调用关系图(python call graph)
    VMware 三种网络模式
  • 原文地址:https://www.cnblogs.com/ssaylo/p/13278970.html
Copyright © 2011-2022 走看看