zoukankan      html  css  js  c++  java
  • JavaScript-获取元素宽高

    获取元素宽高

    getComputedStyle

    注意:

    • 读取的范围是 content 的值

    • 既能读取行内,也可以读取 css 设置的样式

    • 只可以读取,不可以设置

    • 只支持 IE9 及以上的高级浏览器

      geyComputedStyle(oDiv).width
      getComputedStyle(oDiv).height
      

    currentStyle

    • 读取的范围是 content 的值

    • 既能读取行内,也可以读取 css 设置的样式

    • 只可以读取,不可以设置

    • 只支持 IE9 以下的低级浏览器

      oDiv.currentStyle.width
      oDiv.currentStyle.height
      

    style

    • 读取的范围是 content 的值

    • 只能读取行内,不能读取 css 设置的样式

    • 即可以读取,也可以设置

    • 高级低级浏览器都支持

      oDiv.style.width
      oDiv.style.height
      

    offsetWidth / offsetHeight

    • 读取的范围是 content + padding + border 的值

    • 既可以读取行内,也可以读取 css 设置的样式

    • 只可以读取,不可以设置

    • 高级低级浏览器都支持

      oDiv.offsetWidth
      oDiv.offsetHeight
      

    client

    • clientWidth / clientHeight 获取到的宽高是 content + padding

    • clientTop / clientLeft 获取到的宽高是上边框和左边框

      oDiv.clientWidth / oDiv.clientHeight
      oDiv.clientTop / oDiv.clientLeft
      

    获取网页可视区域宽高

    • 高级浏览器

      window.innerWidth
      window.innerHeight
      
    • 低级浏览器

      // 标准模式
      documnet.documentElement.clientWidth
      document.documentElement.clientHeight
      
      // 怪异模式 / 复杂模式
      document.body.clientWidth
      document.body.clientHeight
      
    • 兼容性写法

      function getScreen() {
          if (window.innerWidth){
              return {
                  screenWidth: window.innerWidth,
                  screenHeight: window.innerHeight
              }
          }else if (document.compatMode === "CSS1Compat"){ // 判断网页是否为怪异模式
              return {
                  screenWidth: document.body.clientWidth,
                  screenHeight: document.body.clientHeight
              }
          }else {
              return {
                  screenWidth: document.documentElement.clientWidth,
                  screenHeight: document.documentElement.clientHeight
              }
          }
      }
      
  • 相关阅读:
    Ubuntu18.04安装RTX2080Ti+NVIDIA驱动+CUDA
    G++ 编译多个源文件
    线段树【递归版本】
    Linux 安装 python 指定版本--编译源码方式
    正则表达式高级替换
    【转载】Git忽略规则和.gitignore规则不生效的解决办法
    一次“惊险”的系统修复过程
    YOLO模型对图片中车辆的识别比对
    YOLOv3模型识别车位图片的测试报告(节选)
    在windows下用python调用darknet的yolo接口
  • 原文地址:https://www.cnblogs.com/luwenfeng/p/11693793.html
Copyright © 2011-2022 走看看