记录几个控制位置,坐标和obj的长宽的东西........

最新推荐文章于 2024-09-05 14:27:04 发布
最新推荐文章于 2024-09-05 14:27:04 发布
阅读量897 收藏
点赞数
文章标签： function border div 浏览器 scroll ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wtcsy/article/details/3479180
版权

  以前写过一遍，在新浪的bolg上,但是看着是保存成功了,可是第2天就找不到了。

offsetWidth  :        目标元素的宽度，     用法obj.offsetWidth

offsetHeight :        目标元素的高度，     用法obj,offsetHeight

ie  ff都可以   不过在ff下不能用来算body的高度（这么算 他的高度是等于页面里面元素的高度的）

记录一个简单的例子。

<body><div id="ss" style=" height:300px; width:400px; border:1px solid #000000"></div></body>
<script>
alert("div的高度是："+document.getElementById("ss").offsetHeight+"　　宽度："+document.getElementById("ss").offsetWidth)
alert("页面的高度是："+document.body.offsetHeight+"　　宽度："+document.body.offsetWidth)
</script>

可以看出  当有边框的时候  ff下的div的宽度 和ie下的宽度是不一样。

 

clientWidth   :       目标元素的宽度，     用法obj.clientWidth

clientHeight  :       目标元素的高度，     用法obj,clientHeight

记录一个简单的例子

<body><div id="ss" style=" height:300px; width:400px; border:1px solid #000000"></div></body>
<script>
alert("div的高度是："+document.getElementById("ss").clientHeight+"　　宽度："+document.getElementById("ss").clientWidth)
alert("页面的高度是："+document.body.clientHeight+"　　宽度："+document.body.clientWidth)
</script>

嘿嘿  可以alert()出body的高度了。

 

offsetLeft   :           目标元素离父元素的水平距离，     用法obj.offsetLeft

offsetTop   :            目标元素离父元素的垂直距离，      用法obj.offsetTop     

记录一个简单的例子

<body><div id="ss" style=" height:300px; width:400px; border:1px solid #000000">
<div id="sss" style=" height:150px; width:200px; border:1px solid #000000; margin-left:50px;"></div>
</body></div>
<script>
alert("宽　　"+document.getElementById("ss").offsetLeft+"高 　　"+document.getElementById("ss").offsetTop)
alert("宽　　"+document.getElementById("sss").offsetLeft+"高 　　"+document.getElementById("sss").offsetTop)
</script>

有点不明白  问问老大去。。。。。。。。。。。

 

clientLeft

clientTop                     没用过也没看见别人用过  就不研究了.. 

 

offsetX :   目标元素相对于父元素的x坐标                           只有触发鼠标事件的时候才有这个方法.......

offsetY :   目标元素相对于父元素的y坐标

在FF下是  pageX  pageY

记录一个例子

<body><div id="ss" style="height:400px; width:400px; border:1px solid #000000"></div></body>
<script>
document.getElementById("ss").οnmοusemοve=function(event)
{
 var e =event||window.event
   if(document.all)
     {document.getElementById("ss").innerHTML="X:"+e.offsetX+"　Y:"+e.offsetY}
   else
     {document.getElementById("ss").innerHTML="X:"+e.pageX+"　Y:"+e.pageY} 
}
</script>

 

clientX:   目标元素相对于浏览器的x坐标                             只有触发鼠标事件的时候才有这个方法.......

clientY:   目标元素相对于浏览器的y坐标

记录一个简单的例子

<body><div id="ss" style="height:400px; width:400px; border:1px solid #000000"></div></body>
<script>
document.getElementById("ss").οnmοusemοve=function(event)
{
 var e =event||window.event
     {document.getElementById("ss").innerHTML="X:"+e.clientX+"　Y:"+e.clientY}
}
</script>

 

screenX :       鼠标相对于整个浏览器X的坐标

screenY :        鼠标相对于整个浏览器Y的坐标

记录一个例子

<body><div id="ss"></div></body>
<script>
document.οnmοusemοve=function(event){
var e = event || window.event
document.getElementById("ss").innerHTML="X："+e.screenX+"　Y："+e.screenY}
</script>

 

scrollWidth:   滚动条的宽度

scrollHeigjt:   滚动条的高度

scrollTop  :    滚动条滑块的垂直距离

scrollLeft :     滚动条滑块的水平距离

记录一个简单的例子方便理解

<body>
<div id="ss" style="height:300px; width:400px; overflow:scroll; border:1px solid #000000">
<div  style="height:500px; width:500px; border:1px solid #000000"></div>
</div>
<div id="sss"></div>
</body>
<script>
var div =document.getElementById("ss")
div.οnscrοll=function(){
document.getElementById("sss").innerHTML="scrollHeight :"+div.scrollHeight+"　scrollWidth："+div.scrollWidth+"　scrollTop :"+div.scrollTop+"　scrollLeft :"+div.scrollLeft}
</script>

 

顺手写3个例子

第一个  一个一直定位于右下角的一个div

<body><div id="ss" style="height:200px; width:200px; background-color:#FF0000; position:absolute"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></body>
<script>
var div = document.getElementById("ss")
var top = document.body.clientHeight-div.offsetHeight
function change()
{ 
   div.style.left=document.body.clientWidth-div.offsetWidth
   div.style.top =document.body.clientHeight-div.offsetHeight+document.body.scrollTop
   top = document.body.clientHeight-div.offsetHeight
}
change()
window.οnresize=change
window.οnscrοll=function(){div.style.top=top+document.body.scrollTop}
</script>

 

第二个  一个一直居中的div

<body><div id="ss" style="height:200px; width:200px; background-color:#FF0000; position:absolute"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></body>
<script>
var div  = document.getElementById("ss")
var top  = (document.body.clientHeight-div.offsetHeight)/2
var left = (document.body.clientWidth-div.offsetWidth)/2
function change()
{ 
   div.style.left=(document.body.clientWidth-div.offsetWidth)/2
   div.style.top =(document.body.clientHeight-div.offsetHeight)/2+document.body.scrollTop
   top = (document.body.clientHeight-div.offsetHeight)/2
   left = (document.body.clientWidth-div.offsetWidth)/2
}
change()
window.οnresize=change
window.οnscrοll=function(){div.style.top=top+document.body.scrollTop}
</script>

 

这么写在ie6下有点问题 梁超指点了一下  onresize在ie6下有bug  可以用div的onresize代替body的

把div放在body外面  就不会影响页面的效果了。  果然是好办法。。

<div id="box" style="width:100%"><div>test</div></div>
<body><div id="ss" style="height:200px; width:200px; background-color:#FF0000; position:absolute"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></body>
<script>
var isIE = (document.all) ? true : false
var div  = document.getElementById("ss")
var top  = (document.body.clientHeight-div.offsetHeight)/2
var left = (document.body.clientWidth-div.offsetWidth)/2
function change()
{ 
   div.style.left=(document.body.clientWidth-div.offsetWidth)/2
   div.style.top =(document.body.clientHeight-div.offsetHeight)/2+document.body.scrollTop
   top = (document.body.clientHeight-div.offsetHeight)/2
   left = (document.body.clientWidth-div.offsetWidth)/2
}
change()
var oContainer = document.getElementById("box");
if(isIE){
    oContainer.οnresize=change
}else{
    window.οnresize=change
}

window.οnscrοll=function(){div.style.top=top+document.body.scrollTop}
</script>

 

3。滚动条一直居底

<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
<script>
window.onload = function(){
document.body.scrollTop=document.body.scrollHeight - document.body.clientHeight}
window.οnresize=function(){
document.body.scrollTop=document.body.scrollHeight - document.body.clientHeight}
window.οnscrοll=function(){
document.body.scrollTop=document.body.scrollHeight - document.body.clientHeight}
</script>

wtcsy
关注
3D中的OBJ文件格式详解
weixin_33841722的博客
11-07 3884
常见到的*.obj文件有两种：第一种是基于COFF(Common Object File Format)格式的OBJ文件(也称目标文件)，这种格式用于编译应用程序；第二种是Alias|Wavefront公司推出的OBJ模型文件。本文对第二种obj模型文件进行分析。 3D文件格式，常见的有几种 "*.3ds"，"*.max"，"*.lw"，"*.mb"，"*.dxf"，"*.obj"。但是
Three.js学习记录（加载任意尺寸OBJ模型）
weixin_45699870的博客
04-15 2704
待续
offsetTop、offsetLeft、offsetWidth、offsetHeight
山水子农
08-12 4931
//获取坐标位置 function getpos(e){ var t=e.offsetTop; var l=e.offsetLeft; var height=e.offsetHeight; while(e=e.offsetParent){ t+=e.offsetTop; l+=e.offsetLeft;
scrollLeft、offsetLeft、clientLeft、clientHeight
weixin_30546189的博客
06-18 56
假设 obj 为某个 HTML 控件。obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。我们对前面提到的“上方或上层”与“左方或上...
前端中的scrollHeight 、scrollTop、clientHeight等意思
jjw_zyfx的博客
10-25 3872
要记住 通过 标签.style.width是获取不到宽度的，如果必须要获取可以通过clientWidth，或者是offsetWidth 完成这个动作需要先知道三个高度： scrollHeight 文档内容实际高度，包括超出视窗的溢出部分 scrollTop 滚动条距元素(不一定是屏幕最顶端)顶部滚动的距离 clientHeight窗口可视范围高度（就是自己能看到的高度，如果这...
JavaScript offset家族
weixin_34321753的博客
12-12 120
(1)offsetWith & offsetHeight 用来获取盒子在页面上的实际占有的大小 obj.style.width只能读取或者写入行内样式，对于非行内样式，它无法设置和读取 1.obj.offsetWith 宽 obj.offsetHeight 高 2.obj.style.width 与 obj.offsetWidth的区别 ①obj.sty...
三维鼠标模型交互设计与实现.pdf
01-03
而在WebGL中的Three.js引擎中，已经提供了几个比较简单易操作的类，比如：OrbitControls、DragControls等，这些已经写好的类中已经存在相应的监听方法。用户可以通过鼠标的监听事件addEventListener来实现交互操作。...
Three.js 构建元宇宙三维世界房子
最新发布
幽幽谷
09-05 836
这两天用 Three.js 画了一个 3D 的房子，放了一个床进去，可以用鼠标和键盘控制移动，有种 3D 游戏的即视感。
python读取cad元素_python3读取autocad图形文件.py实例
weixin_28684825的博客
01-13 3928
废话不多说，看代码吧！'''待完善。此代码实现了，根据标注文本的属性，数值，位置，及 容差，去判断 设计 和 实测两图中的同一位置的尺寸。如果是同一位置的尺寸，则进行比较，并把结果存成表格，到运行此代码的当前目录。此代码运行时，要读取的 dwg文件 必须处于打开状态。且 不能在 移动(pan) 模式。启动代码：python dwg_measurements_comparison4.py [8]其中...
three.js—ArrayCamera使用
Hcl12138的博客
06-21 898
three.js—ArrayCamera使用ArrayCamera实现过程代码 ArrayCamera new THREE.ArrayCamera(Array) 创建一组相机，其参数是一个数组，数组中的每一个值都是一个THREE.Camera。可用此方法使用多个相机在不同位置拍摄场景，并分屏放置画面。效果如图，这是创建了三个相机然后在x,y,z三个方向上以相同的距离拍摄的场景中的对象。 实现过程 创建场景，渲染器和拍摄物体对象，可参照three.js学习 创建多个相机,这里我只用三个所以就直接这样
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解
热门推荐
xuantian868的专栏
10-21 9万+
  HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度o
offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
javaloveiphone的专栏
03-11 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式</title> <script type="text/javascript" src="jquery.min.js"></script></head> <body
如何在MFC中加入OBJ到场景中？怎么动态定位它的位置？
momosp的专栏
09-18 881
<br /><br />#include <vg.h><br />      main( int argc, char *argv[] )<br />      {<br />           float      h;<br />           vgDataSet  *ds;<br />           vgObject   *obj;<br />           vgScene    *scene;<br />           vgObserver *obs;<br />    
JS中offsetwidth等图文解释
diaozhen7831的博客
01-15 217
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body...
多盒子的运动---用目标值减去对象的变量属性(target - obj.offsetWidth)
YOUAFR的博客
10-18 356
function move(obj,target){ clearInterval(obj.timer); //obj.timer 是给每个div都添加上这个timer定时器 obj.timer = setInterval(function(){ //声明每次执行定时器的改变量为speed 即是缓冲运动的公式 //(目标函数的值 减去 对象的变量) 除以1
OBJ格式模型详细介绍
xyh的博客
08-31 4万+
obj格式有4种数据，分别以一下字母开头： v顶点 vt纹理坐标 vn顶点法向量 f 面 顶点 格式：v x y z 意义：每个顶点的坐标 纹理坐标 格式：vt u v w 意义：绘制模型的三角面片时，每个顶点取像素点时对应的纹理图片上的坐标。纹理图片的坐标指的是，纹理图片如果被放在屏幕上显示时，以屏幕左下角为原点的坐标。 注意：w一般用于形容三维纹理，大部分是用不到的，基...
offsetTop,offsetLeft,offsetWidth,offsetHeight,scrollLeft,scrollWidth,clientWidth详细
Luqing的专栏
05-04 1071
假设 obj 为某个 HTML 控件。obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。我们对前面提到的“上方
Js——ScrollTop、ScrollHeight、ClientHeight、OffsetHeight汇总
CaseyWei
06-17 6852
一直对ScrollTop、ScrollHeight、ClientHeight、OffsetHeight这些内容傻傻分不清楚，今天整体下。 scrollHeight scrollHeight含有scroll当然这个高度与滚动相关。 读写：只读 描述：包括overflow样式属性导致的视图中不可见内容，没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值c...
three.js: OBJ转JS详细教程与Python工具使用
three.js官方提供了一个名为convert_obj_three.py的工具，用于将.obj和.mtl文件转换成three.js支持的JSON模型格式。 首先，准备工作主要包括： 1. **安装Python环境**：由于convert_obj_three.py是Python脚本，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值