其他分享
首页 > 其他分享> > 位置innerHeight

位置innerHeight

作者:互联网

原生js中有三大家族: offset scroll  client

      //offset家族中有:offsetLeft  offsetTop  offsetWidth  offsetHeight

      //offsetLeft: 元素左外边框距离他的定位父级(offsetParent)左内边框之间的距离.

      //offsetTop:  元素上外边框距离他的定位父级上内边框之间的距离.

jq中

 //1.jQuery中,也有offset()方法. 他代表什么意思,是不是和原生js中的offsetLeft/offsetTop一样的. 不是.

      //offset()方法返回的是一个对象,里面包含top和left的值.

      //offset()方法获取元素距离document的位置

      $('#btn1').on('click', function () {

        //console.log($('#son').offset());

 

        //设置,参数是一个对象.

        $('#son').offset({

          left:200,

          top:200

        });

 

        //注意:

        //如果这个元素没哟定位,设置offset()系统会自动给他添加一个relative的定位.

      });

 

 

      //2.position()方法获取的是元素距离有定位的父元素(offsetParent)的位置

      //position()方法返回的也是一个对象,包含top和left的值.

      $('#btn2').on('click', function () {

        //console.log($('#son').position());

 

        //不能设置.下面代码没有效果

        // $('#son').position({

        //   left:200,

        //   top:200

        // });

 

      });

 

      

$(function () {

      //原生js中的三大家族:scrollTop  scrollLeft.

      //jQuery中也有scrollLeft(); scrollTop();他们代表的意思和原生的一样吗? 是一样

      //都表示滚动出去的距离.

 

      $('#btn').on('click', function () {

        //获取.

        //console.log($('div').scrollLeft() + ":" + $('div').scrollTop());

 

        //设置滚动出去的部分的距离.

        $('div').scrollLeft(100);

        $('div').scrollTop(100);

      });

 

 

outerWidth(true); outerHeight(true); //方法返回元素的宽度/高度(包括内边距和边框和外边距)。

innerWidth(); innerHeight(); //方法返回元素的宽度/高度(包括内边距)。

 

        //7.获取网页的可视区宽高

        // 获取可视区宽度  $(window).width();

        // 获取可视区高度  $(window).height();

        console.log($(window).width());

        console.log($(window).height());

标签:位置,console,log,元素,距离,边框,innerHeight,offset
来源: https://blog.csdn.net/weixin_43775626/article/details/100826963