如何使用jquery / javascript获得确切的div定位 [英] How to get the exact div positioning using jquery/javascript
问题描述
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // EN
http://www.w3.org/TR/html4/loose.dtd\">
< html>
< head>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>
< style>
.content {width：60％;
职位：亲属;
text-align：center;
top：150px;
left：300px;
right：450px; border-style：solid;
border-width：5px;
}
< / style>
< / head>
< body>
< div class =content>
测试内容
< / div>
< script>
函数ReadDivPos（）{
var content = document.getElementsByClassName（'content'）; $（i = 0; i< content.length; i ++）{
console.log（Top+ content [i] .getBoundingClientRect（）。）top
console.log（left+ content [i] .getBoundingClientRect（）。left）// left
console.log（right+ content [i] .getBoundingClientRect（）。right）/ / right
console.log（offsetWidth+ content [i] .offsetWidth）; //宽度
}
var _divPos =LEft+ content [0] .getBoundingClientRect（）。left +，Width+ content [0] .offsetWidth +，Avail Width+ window。 screen.availWidth +，Right+ content [0] .getBoundingClientRect（）。right;
return _divPos;
}
console.log（ReadDivPos（））;
< / script>
< / body>
< / html>
当页面没有调整大小时，此代码正常工作，但当页面调整大小并显示水平滚动条时在屏幕上，然后它不能正常工作。我如何得到div的确切位置，如果页面调整大小或不。例如，这些是我捕获的图像来解释问题。
当页面大小调整并且滚动条位于最右侧时，div左侧的定位显示为208px是错误的，它应该是311像素。
当我移动左侧的滚动条，然后使用Chrome MeasureIT添加计算宽度时，它会显示311px。
< img src =https://i.stack.imgur.com/Lvrxe.pngalt =滚动条位于最左端>
我想以获得div的确切位置。我使用div的类来获得定位，因为我不使用div id，我只需要使用该类，所以这是我如何做到的，但它不工作时页面调整大小。任何帮助？
由于您已经在页面中加载了jQuery，请查看jQuery offset（）和 position（）方法并利用jQuery选择器。
< script>
函数ReadDivPos（选择器）{
var _divPos =;
$ b $（selector）.each（function（）{
var p = $（this）.offset（）;
var w = $（this）.width（） ;
console.log（Top+ p.top）// top
console.log（left+ p.left）// left
console.log（right + p.left + w）// right
console.log（offsetWidth+ w）; //宽度
_divPos + =左+ p.left +，宽度+ w +，Avail Width+ window.screen.availWidth +，Right+（p.left + w）+\\ n;
}）;
return _divPos;
}
console.log（ReadDivPos（。content））;
< / script>
I am trying to calculate the div positioning. This is my code .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
.content {width: 60%;
position: relative;
text-align: center ;
top: 150px;
left:300px;
right:450px; border-style: solid;
border-width: 5px;
}
</style>
</head>
<body>
<div class="content">
Testings content
</div>
<script>
function ReadDivPos() {
var content = document.getElementsByClassName('content');
for (i = 0; i < content.length; i++) {
console.log("Top " + content[i].getBoundingClientRect().top) //top
console.log("left " + content[i].getBoundingClientRect().left) //left
console.log("right " + content[i].getBoundingClientRect().right) //right
console.log("offsetWidth " + content[i].offsetWidth); //width
}
var _divPos = "LEft "+content[0].getBoundingClientRect().left + ",Width " + content[0].offsetWidth + ",Avail Width " + window.screen.availWidth + ",Right " + content[0].getBoundingClientRect().right;
return _divPos;
}
console.log(ReadDivPos());
</script>
</body>
</html>
This code works fine when the page is not resized but when the page is resized and horizontal scroll bar appears on the screen then it doesnot work fine. How can i get the exact positions of the div if the page is resized or not. For example these are the images i have captured to explain the problem .
When the page is resized and scroll bar is at the extreme right then left positioning of div shows 208px which is wrong and it should be 311 px .
When i move the scroller on the left and then i calculated the width using Chrome MeasureIT add on then it says 311px.
I want to get the exact positioning of the div.I am using class of the div to get the positioning as i am not using div id and i only had to use the class so this is how i have done it but it is not working when the page is resized. Any help?
Since you already have jQuery loading in the page, take a look at the jQuery offset() and position() methods and leverage jQuery selectors.
<script>
function ReadDivPos(selector) {
var _divPos = "";
$(selector).each(function() {
var p = $(this).offset();
var w = $(this).width();
console.log("Top " + p.top) //top
console.log("left " + p.left) //left
console.log("right " + p.left + w) //right
console.log("offsetWidth " + w); //width
_divPos += "Left " + p.left + ",Width " + w + ",Avail Width " + window.screen.availWidth + ",Right " + (p.left + w) + "\\n";
});
return _divPos;
}
console.log(ReadDivPos(".content"));
</script>
这篇关于如何使用jquery / javascript获得确切的div定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
