zoukankan      html  css  js  c++  java
  • jquery 获取元素在浏览器中的绝对位置

    代码详解
    1,获取对象(自定义调整打开新窗口参照元素)
    var obj = $(”#oButton”);
    实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调整,实例中将创建的新窗口显示的按钮的右下角。

    2,获取对象元素的位置(offset()方法)
    var offset = obj.offset();
    获取对象元素的位置,分别是元素的top和left,调用方法是:offset.left和offset.top,可知当前对象的左部和顶部位置。

    3,获取对象元素的宽度(width()方法)
    var right = offset.left+obj.width();
    实例中是获取对象的右下角位置,创建新窗口的左部位置。

    4,获取对象元素的高度(height()方法)
    var down = offset.top+obj.height();
    实例中是获取对象的右下角位置,创建新窗口的顶部位置。

    5,定义CSS样式,分别设置左部和顶部。
    ‘left’:right,
    ‘top’:down,
    要注意CSS样式中margin和padding的值,以及浏览器IE与firefox兼容等效果。

    结合上面实例,jQuery获取元素位置以及高度与宽度非常简单,通过内置方法offset(),width()和height()实现我们的动态调整打开新窗口功能,对于其它扩展应用来说也一样,了解jQuery获取元素位置以及高度与宽度方法,对于创建新元素,调整元素位置与大小,将非常实用。

  • 相关阅读:
    CTFHub_技能树_文件上传
    QT入门-重载的信号槽
    QT入门-自定义信号
    C++: xx does not name a type报错
    HDU1166 敌兵布阵
    洛谷P2574 XOR的艺术(线段树)
    P3373 【模板】线段树 2(板子好题)
    SP1716 GSS3
    QT入门-自定义槽函数
    Educational Codeforces Round 87 (Rated for Div. 2) D. Multiset(树状数组/好题)
  • 原文地址:https://www.cnblogs.com/phpyangbo/p/6198566.html
Copyright © 2011-2022 走看看