blocks|key|1957886|text|而不是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1957887|var+bottom+=+$(window).height()+-+link.height();
bottom+=+offset.top+-+bottom;|code-block|syntax|javascript|1957888|你为什么不做|1957889|var+bottom+=+$(window).height()+-+top+-+link.height();|1957890|编辑:你的错误是你在做|1957891|bottom+=+offset.top+-+bottom;|1957892|1957893|bottom+=+bottom+-+offset.top;+//+or+bottom+-=+offset.top;|1957894|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|X|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|O|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|P|3|Q|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<p>Instead of</p>

<pre><code>var bottom = $(window).height() - link.height();
bottom = offset.top - bottom;
</code></pre>

<p>Why aren't you doing</p>

<pre><code>var bottom = $(window).height() - top - link.height();
</code></pre>

<p>Edit: Your mistake is that you're doing</p>

<pre><code>bottom = offset.top - bottom;
</code></pre>

<p>instead of</p>

<pre><code>bottom = bottom - offset.top; // or bottom -= offset.top;
</code></pre>


blocks|key|941319|text|您可以使用.position()来完成此操作|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|941320|var+link+=+$(element);
var+position+=+link.position();+//cache+the+position
var+right+=+$(window).width()+-+position.left+-+link.width();
var+bottom+=+$(window).height()+-+position.top+-+link.height();|code-block|syntax|javascript|941321|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/position/^0|5|B|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You can use the <a href="http://api.jquery.com/position/" rel="nofollow">.position()</a> for this</p>

<pre><code>var link = $(element);
var position = link.position(); //cache the position
var right = $(window).width() - position.left - link.width();
var bottom = $(window).height() - position.top - link.height();
</code></pre>


blocks|key|1957915|text|我认为|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1957916|<script+src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div>Testing</div>
<div+id="result"+style="margin:1em+4em;+background:rgb(200,200,255);+height:500px"></div>
<div+style="background:rgb(200,255,200);+height:3000px;+width:5000px;"></div>

<script>
(function(){
++++var+link=$("#result");

++++var+top+=+link.offset().top;+//+position+from+$(document).offset().top
++++var+bottom+=+top+%2B+link.height();+//+position+from+$(document).offset().top

++++var+left+=+link.offset().left;+//+position+from+$(document).offset().left
++++var+right+=+left+%2B+link.width();+//+position+from+$(document).offset().left

++++var+bottomFromBottom+=+$(document).height()+-+bottom;
++++//+distance+from+document's+bottom
++++var+rightFromRight+=+$(document).width()+-+right;
++++//+distance+from+document's+right

++++var+str="";
++++str%2B="top:+"%2Btop%2B"<br>";
++++str%2B="bottom:+"%2Bbottom%2B"<br>";
++++str%2B="left:+"%2Bleft%2B"<br>";
++++str%2B="right:+"%2Bright%2B"<br>";
++++str%2B="bottomFromBottom:+"%2BbottomFromBottom%2B"<br>";
++++str%2B="rightFromRight:+"%2BrightFromRight%2B"<br>";
++++link.html(str);
})();
</script>|code-block|syntax|javascript|1957917|结果是|1957918|top:+44
bottom:+544
left:+72
right:+1277
bottomFromBottom:+3068
rightFromRight:+3731|1957919|在我的chrome浏览器里。|1957920|当文档可滚动时，$(window).height()返回浏览器视口的高度，而不是滚动中隐藏了某些部分的文档的宽度。参见http://api.jquery.com/height/。|offset|length|style|CODE|1957921|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/height/^0|0|0|0|0|0|8|I|1N|T|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@$O|16|P|17|Q|R]]|9|@$O|18|P|19|1|1A]]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>I think</p>

<pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;

&lt;div&gt;Testing&lt;/div&gt;
&lt;div id="result" style="margin:1em 4em; background:rgb(200,200,255); height:500px"&gt;&lt;/div&gt;
&lt;div style="background:rgb(200,255,200); height:3000px; width:5000px;"&gt;&lt;/div&gt;

&lt;script&gt;
(function(){
    var link=$("#result");

    var top = link.offset().top; // position from $(document).offset().top
    var bottom = top + link.height(); // position from $(document).offset().top

    var left = link.offset().left; // position from $(document).offset().left
    var right = left + link.width(); // position from $(document).offset().left

    var bottomFromBottom = $(document).height() - bottom;
    // distance from document's bottom
    var rightFromRight = $(document).width() - right;
    // distance from document's right

    var str="";
    str+="top: "+top+"&lt;br&gt;";
    str+="bottom: "+bottom+"&lt;br&gt;";
    str+="left: "+left+"&lt;br&gt;";
    str+="right: "+right+"&lt;br&gt;";
    str+="bottomFromBottom: "+bottomFromBottom+"&lt;br&gt;";
    str+="rightFromRight: "+rightFromRight+"&lt;br&gt;";
    link.html(str);
})();
&lt;/script&gt;
</code></pre>

<p>The result are</p>

<pre><code>top: 44
bottom: 544
left: 72
right: 1277
bottomFromBottom: 3068
rightFromRight: 3731
</code></pre>

<p>in chrome browser of mine.</p>

<p>When the document is scrollable, <code>$(window).height()</code> returns height of browser viewport, not the width of document of which some parts are hiden in scroll. See <a href="http://api.jquery.com/height/" rel="nofollow">http://api.jquery.com/height/</a> .</p>


blocks|key|1957939|text|//+Returns+bottom+offset+value+%2B+or+-+from+viewport+top
function+offsetBottom(el,+i)+{+i+=+i+%7C%7C+0;+return+$(el)[i].getBoundingClientRect().bottom+}

//+Returns+right+offset+value
function+offsetRight(el,+i)+{+i+=+i+%7C%7C+0;+return+$(el)[i].getBoundingClientRect().right+}

var+bottom+=+offsetBottom('#logo');
var+right+=+offsetRight('#logo');|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1957940|这将找到从视口顶部和左侧到元素确切边缘的距离，除此之外什么也找不到。假设你的logo是350px，左边距是50px，变量'+right‘的值是400，因为这是到达元素边缘的实际距离，不管你的右边是否有更多的填充或边缘。|unstyled|1957941|如果您的框大小CSS属性设置为边框，它将继续工作，就像它被设置为默认内容框一样。|1957942|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>// Returns bottom offset value + or - from viewport top
function offsetBottom(el, i) { i = i || 0; return $(el)[i].getBoundingClientRect().bottom }

// Returns right offset value
function offsetRight(el, i) { i = i || 0; return $(el)[i].getBoundingClientRect().right }

var bottom = offsetBottom('#logo');
var right = offsetRight('#logo');
</code></pre>

<p>This will find the distance from the top and left of your viewport to your element's exact edge and nothing beyond that.  So say your logo was 350px and it had a left margin of 50px, variable 'right' will hold a value of 400 because that's the actual distance in pixels it took to get to the edge of your element, no matter if you have more padding or margin to the right of it.</p>

<p>If your box-sizing CSS property is set to border-box it will continue to work just as if it were set as the default content-box.  </p>


blocks|key|1418379|text|下面是一个jquery函数，它返回页面上任何类或id的对象|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1418380|var+elementPosition+=+function(idClass)+{
++++++++++++var+element+=+$(idClass);
++++++++++++var+offset+=+element.offset();

++++++++++++return+{
++++++++++++++++'top':+offset.top,
++++++++++++++++'right':+offset.left+%2B+element.outerWidth(),
++++++++++++++++'bottom':+offset.top+%2B+element.outerHeight(),
++++++++++++++++'left':+offset.left,
++++++++++++};
++++++++};


++++++++console.log(elementPosition('#my-class-or-id'));|code-block|syntax|javascript|1418381|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is a jquery function that returns an object of any class or id on the page     </p>

<pre><code>var elementPosition = function(idClass) {
            var element = $(idClass);
            var offset = element.offset();

            return {
                'top': offset.top,
                'right': offset.left + element.outerWidth(),
                'bottom': offset.top + element.outerHeight(),
                'left': offset.left,
            };
        };


        console.log(elementPosition('#my-class-or-id'));
</code></pre>


blocks|key|941438|text|Vanilla+Javascript答案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|941439|var+c+=+document.getElementById("myElement").getBoundingClientRect();
var+bot+=+c.bottom;
var+rgt+=+c.right;|code-block|syntax|javascript|941440|需要说明的是，这个元素可以是任何东西，只要你给它分配了一个id，<img>，<div>，<p>等等。|offset|length|style|CODE|941441|例如|941442|<img
++++id='myElement'
++++src='/img/logout.png'
++++className='logoutImg+img-button'
++++alt='Logout'
/>|941443|entityMap^0|0|0|W|5|12|5|18|3|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@$I|V|J|W|K|L]|$I|X|J|Y|K|L]|$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|R|$]]

<p>Vanilla Javascript Answer</p>

<pre><code>var c = document.getElementById("myElement").getBoundingClientRect();
var bot = c.bottom;
var rgt = c.right;
</code></pre>

<p>To be clear the element can be anything so long as you have allocated an id to it <code>&lt;img&gt;</code> <code>&lt;div&gt;</code> <code>&lt;p&gt;</code> etc.</p>

<p>for example</p>

<pre class="lang-html prettyprint-override"><code>&lt;img
    id='myElement'
    src='/img/logout.png'
    className='logoutImg img-button'
    alt='Logout'
/&gt;
</code></pre>


<p>I'm trying to get the position of an element within the window like so:</p>

<pre><code>var link = $(element);

var offset = link.offset();
var top = offset.top;
var left = offset.left;
var bottom = $(window).height() - link.height();
bottom = offset.top - bottom;
var right = $(window).width() - link.width();
right = offset.left - right;
</code></pre>

<p>However the bottom and right have <code>-</code> in front of them... Why is this? as the numbers are correct just they should NOT be minus.</p>


Get bottom and right position of an element

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我尝试获取一个元素在窗口中的位置，如下所示：var link = $(element);var offset = link.offset();var top = offset.top;var left = offset.left;var bottom = $(window).height() - link.height...

问获取元素的底部和正确位置
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取元素的底部和正确位置EN