zoukankan      html  css  js  c++  java
  • 谈谈jQuery和js里有关位置和宽高的方法

    总结一下jQuery、原生js设置和获取位置、宽高的方法。

    一、jQuery关于元素位置的方法

    position() 方法:只能获取,不能设置。

    可获取元素相对于其第一个position值不为static的祖先元素的偏移量,如果没有,则是相对于文档的偏移量;返回一个对象,包括两个属性:left,top; 属性值无单位,number类型。具体用法:

    $(element).position().left; //获取元素相对于其第一个position值不为static的祖先元素的偏移量
    

    offset()方法:既能获取,也能设置。

    获取和设置元素相对于文档的偏移量。获取时返回一个对象,包括两个属性:left,top。属性值无单位,number类型;设置时给方法传入一个对象,可包括属性top,left;具体用法:

    $(elemment).offset().left; //获取元素相对于文档的偏移量
    
    $(element).offset({top:200,left:100}); //设置元素相对于文档的偏移量
    

    scrollLeft()、scrollTop(),滚动方法:既能获取,也能设置。

    可以获取和设置元素从顶部或者左侧已经滚动的值,获取时返回number类型的数值,设置时给方法传递一个数字参数。具体用法:

    $(element).scrollLeft(); //获取元素滚动的left值
    
    $(element).scrollLeft(200); //设置元素滚动的left值

    二、jQuery关于元素宽高的方法

    width()、height() 方法:既能获取,也能设置。

    可获取和设置元素的宽度和高度。获取时,返回number类型;设置时,给方法传入数值类型的参数即可。具体用法:

    $(element).width(); //获取元素宽度
    
    $(element).width(200); //设置元素宽度 

    innerWidth()、innerHight()方法:只能获取,不能设置。

    可获取第一个匹配元素的内部宽度和高度,例如获取元素内部宽度时,包括width+padding,不包括border。

    outerWidth()、outerHight()方法:只能获取,不能设置。

    可获取第一个匹配元素的外部宽度和高度,有两种情况: (用获取元素外部宽度来举例)

          1、当方法内部不指定参数或者参数为false时,包括width+padding+margin;

          2、当方法内部参数为true时,包括width+padding+border+margin;

    css()方法:既可获取,也可设置。

    可 以获取和设置元素的宽高(当然也可获取和设置其他css属性,这里只是为了与其他几种设置获取元素宽高的方法做对比),当获取元素的宽高时,返回一个单位 为px的string字符串;当设置元素宽高时,给css()方法传入对象,对象里面包含widthheight属性;具体用法:

    $(element).css('width'); //获取元素宽度
    
    $(element).css({'200px',height:'300px'});//设置元素的宽度和高度,也可以不要引号和单位
    

    三、原生js关于元素位置的属性

    offsetLeft、offsetTop属性:只可获取,不可设置(类似jQuery的position()方法)。

    相对于其第一个position值不为static的祖先元素来计算偏移量,返回number类型数值。

    style.left、style.top:既可设置,也可获取。

    与offsetLeft、offsetTop属性相比,共同点:都是相对于其第一个position值不为static的祖先元素来计算偏移量;不同点:

      1、通过style,既可获取元素宽高,也可设置元素宽高

      2、style.left/style.top返回的是字符串(包含单位)

      3、要获取style.left/style.top需要事先定义,而且必须定义在html元素的内联样式里,否则获取到的值将为空。

  • 相关阅读:
    今晚直播 | 揭秘携程应用路由生态系统
    OpenStack虚拟云桌面在携程呼叫中心的应用
    从设计到开发,硅谷技术专家教你做“声控”APP
    深度学习系列 | 诺亚面向语音语义的深度学习研究进展
    知识图谱中的推理技术及其在高考机器人中的应用
    用户在线广告点击行为预测的深度学习模型
    知识库上的问答系统:实体、文本及系统观点
    深度学习在搜狗无线搜索广告中的应用
    元旦三天假期,实现一个电商退单管理系统【四】-手机客户端实现
    元旦三天假期,实现一个电商退单管理系统【三】
  • 原文地址:https://www.cnblogs.com/mixue/p/5351093.html
Copyright © 2011-2022 走看看