我正在尝试计算 div 定位。这是我的代码。
<!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>
当页面未调整大小时，这段代码工作正常，但当页面调整大小时水平滚动条出现在屏幕上时，它就不能正常工作。如果页面大小调整或不调整，我如何获得 div 的确切位置。例如，这些是我为解释问题而拍摄的图像。
当页面调整大小并且滚动条在最右边时，div 的左定位显示 208px 这是错误的，它应该是 311 px 。
当我向左移动滚动条，然后使用 Chrome MeasureIT 添加计算宽度时，它显示为 311 像素。
我想获得 div 的准确定位。我正在使用 div 的类来获得定位，因为我没有使用 div id，我只需要使用类，所以我就是这样做的，但是它调整页面大小时不起作用。有帮助吗？
最佳答案
由于您已经在页面中加载了 jQuery，请查看 jQuery offset()和 position()方法并利用 jQuery 选择器。
<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>
关于javascript - 如何使用 jquery/javascript 获取精确的 div 定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27715056/