zoukankan      html  css  js  c++  java
  • javascript位置相关知识点整理

    1、css指定元素的位置采用的是文档坐标;

    2、js查询元素位置的方法返回的是元素在视口中的位置,即视口坐标;

    如何获得元素的位置和尺寸

    获得元素的位置和尺寸可以通过getBoundingClientRect(),该方法返回的是视口坐标(值包含边框和内边距,不含外边距);

    Element.getBoundingClientRect()不支持老式浏览器,可以用offsetWidth,offsetHeight,offsetLeft,offsetTop,clientWidth,clientHeight,clientLeft,clientTop,scrollWidth,scrollHeight,scrollLeft,scrollTop(这些都是Element对象,scrollTo是window对象)

    offsetWidth,offsetHeight返回值包含内容和内边距和边框,不包含外边距

    clientWidth,clientHeight返回值包含内容和内边距,不包含边框和外边距;对于内联元素这两个值总是0

    scrollWidth,scrollHeight返回值包含内容和内边距以及溢出的部分,不包含边框和外边距,当无溢出时和clientWidth,clientHeight相等

    offsetLeft,offsetTop对于大部分元素都是文档坐标,但对于已定位的元素的后代元素和一起其他元素(表格)返回的是相对于祖先元素的坐标

    clientLeft,clientTop基本不用

    scrollLeft,scrollTop指定滚动条滚动到指定的位置

    如何获取滚动条位置:

    可以通过(pageXOffset,pageYOffset,ScrollX,ScrollY:window对象),(scrollLeft,scrollTop:Element对象),来获得滚动条的位置

    window.pageXOffset,window.pageYOffset

    window.ScrollX,window.ScrollY

    正常模式下:

    document.documentElement.scrollLeft,document.documentElement.scrollTop

    怪异模式下:

    document.body.scrollLeft,document.body.scrollTop(360极速模式就是怪异模式)

    如何让滚动条滚动到指定位置:

    window.scrollTo();参数为x和y方向上的位置,指定数值多少就跳转到多少

    window.scrollBy();参数为x和y方向上的相对值,在原有基础上增加

  • 相关阅读:
    SSH--1
    oracle---jdbctest--laobai
    oracle---jdbc--laobai
    oracle--知识点汇总2---laobai
    Tomcat_Java Web_内存溢出总结
    单例经典示例
    线程--demo3
    网络通信---示例
    验证码---示例
    java--绘图
  • 原文地址:https://www.cnblogs.com/diantao/p/4640973.html
Copyright © 2011-2022 走看看