javascript获取对象高度和宽度(整理)
标签元素的宽高值获取
Obj.offsetWidth //绝对宽度
Obj.offsetHeight //绝对高度
Obj.offsetLeft //相对于自己的offsetParent元素的位置
Obj.clientLeft //和客户区域的实际左边之间的距离
Obj.scrollLeft //返回和设置当前横向滚动务的坐标值
下面是我做的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<style type="text/css">
#tanchu_div
{
position: relative;
}
#ttt
{
position: absolute;
display: none;
top: 0;
background-color: ActiveBorder;
}
</style>
<script type="text/javascript">
function t(){
var my_Width = document.getElementById("aaa").offsetWidth ;
var b = document.getElementById("aaa").offsetLeft;
my_Width = my_Width + b;
document.getElementById("ttt").style.left = my_Width+10 + 'px';
document.getElementById("ttt").style.position = 'absolute';//"asd"就是要绝对定位的div的id。
document.getElementById("ttt").style.zIndex = '999';
document.getElementById("ttt").style.display="block";
}
</script>
</head>
<body>
11000120121212
<br />
11000120121212 11000120121212 11000120121212 11000120121212 11000120121212 11000120121212
11000120121212 11000120121212
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="tanchu_div" style="left: 100px">
11000120121212110001201212121100012012121211000120121212<a id="aaa" onclick="t();"
href="#">弹出 </a>
<div id="ttt">
dsdjvdjdv哈哈snjd vsjdsvj2335121211
<br />
dsdjvdjdvsnj
<br />
dvsjdsvj2335121211
<br />
dsdjvdjdvsnjd
<br />
vsjdsvj2335121211
<br />
dsdjvdjdvsnjd
<br />
vsjdsvj2335121211
<br />
dsdjvdjdvsnjdvsjdsvj2335121211
<br />
dsdjvddvsnjd
<br />
vsjdsvj2335121211
<br />
dsdjvdjdvsnjd
<br />
vsjdsvj2335121211
<br />
dsdjvdjdvsnj
<br />
dvsjdsvj2335121211
<br />
dsdjvdjdvsnjd
<br />
vsjdsvj2335121211
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
sdsfsefsfsdfs fdsfsdfsdfsdfsd fsdfdsfsdfsdfsfdss
<br />
sdsfsefsfsdfs fdsfsdfsdfsdfsd fsdfdsfsdfsdfsfdss sdsfsefsfsdfs fdsfsdfsdfsdfsd fsdfdsfsdfsdfsfdss
sdsfsefsfsdfs fdsfsdfsdfsdfsd fsdfdsfsdfsdfsfdss sdsfsefsfsdfs fdsfsdfsdfsdfsd fsdfdsfsdfsdfsfdss
sdsfsefsfsdfs fdsfsdfsdfsdfsd fsdfdsfsdfsdfsfdss sdsfsefsfsdfs fdsfsdfsdfsdfsd fsdfdsfsdfsdfsfdss
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述