JS,Jquery获取各种屏幕的宽度和高度,clientX,offsetX,在父窗口中获取iframe中的元素

JS,Jquery获取各种屏幕的宽度和高度

Javascript:

网页可见区域宽:document.body.clientWidth

网页可见区域高:document.body.clientHeight

网页可见区域宽:document.body.offsetWidth(包括边线的宽)

网页可见区域高:document.body.offsetHeight(包括边线的高)

网页正文全文宽:document.body.scrollWidth

网页正文全文高:document.body.scrollHeight

网页被卷去的高:document.body.scrollTop

网页被卷去的左:document.body.scrollLeft

网页正文部分上:window.screenTop

网页正文部分左:window.screenLeft

屏幕分辨率的高:window.screen.height

屏幕分辨率的宽:window.screen.width

屏幕可用工作区高度:window.screen.availHeight

屏幕可用工作区宽度:window.screen.availWidth

JQuery:

$(document).ready(function(){

alert($(window).height());//浏览器当前窗口可视区域高度

alert($(document).height());//浏览器当前窗口文档的高度

alert($(document.body).height());//浏览器当前窗口文档body的高度

alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括borderpaddingmargin

alert($(window).width());//浏览器当前窗口可视区域宽度

alert($(document).width());//浏览器当前窗口文档对象宽度

alert($(document.body).width());//浏览器当前窗口文档body的宽度

alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括borderpaddingmargin

});

clientX设置或获取鼠标指针位置相对于窗口客户区域的x坐标,其中客户区域不包括窗口自身的控件和滚动条。

clientY设置或获取鼠标指针位置相对于窗口客户区域的y坐标,其中客户区域不包括窗口自身的控件和滚动条。

offsetX设置或获取鼠标指针位置相对于触发事件的对象的x坐标。

offsetY设置或获取鼠标指针位置相对于触发事件的对象的y坐标。

screenX设置或获取获取鼠标指针位置相对于用户屏幕的x坐标。

screenY设置或获取鼠标指针位置相对于用户屏幕的y坐标。

x设置或获取鼠标指针位置相对于父文档的x像素坐标。

y设置或获取鼠标指针位置相对于父文档的y像素坐标。

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标,event.X也一样。

但是如果设置事件对象的定位属性值为relative,event.clientX不变,而event.X返回事件对象的相对于本体的坐标。

var strInfo="";
strInfo+="rn网页可见区域宽:"+document.body.clientWidth;
strInfo+="rn网页可见区域高:"+document.body.clientHeight;
strInfo+="rn网页可见区域宽:"+document.body.offsetWidth+"(包括边线的宽)";
strInfo+="rn网页可见区域高:"+document.body.offsetHeight+"(包括边线的宽)";
strInfo+="rn网页正文全文宽:"+document.body.scrollWidth;
strInfo+="rn网页正文全文高:"+document.body.scrollHeight;
strInfo+="rn网页被卷去的高:"+document.body.scrollTop;
strInfo+="rn网页被卷去的左:"+document.body.scrollLeft;
strInfo+="rn网页正文部分上:"+window.screenTop;
strInfo+="rn网页正文部分左:"+window.screenLeft;
strInfo+="rn屏幕分辨率的高:"+window.screen.height;
strInfo+="rn屏幕分辨率的宽:"+window.screen.width;
strInfo+="rn屏幕可用工作区高度:"+window.screen.availHeight;
strInfo+="rn屏幕可用工作区宽度:"+window.screen.availWidth;
window.confirm(strInfo);

x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。

clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域。

offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。

screenX:相对于用户屏幕

代码如下

<table border=1 cellpadding=15 cellspacing=15 style="position:relative;left:100;top:100">
<tr><td>
<div onclick="show()" style="background:silver;cursor:hand">
Click here to show.
</div>
</td></tr>
</table>
<script>
function show(){
alert("window.event.x:"+window.event.x+"nwindow.event.y:"+window.event.y+"nevent.clientX:"+event.clientX+"nevent.clientY:"+event.clientY+"nevent.offsetX:"+event.offsetX+"nevent.offsetY:"+event.offsetY+"nwindow.event.screenX:"+window.event.screenX+"nwindow.event.screenY:"+window.event.screenY);
}
</script>

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标

event.X也一样

但是如果设置事件对象的定位属性值为relative

event.clientX不变

而event.X返回事件对象的相对于本体的坐标

event对象详解ICOOE2000.3.31http://www.hzhuti.com

event代表事件的状态,例如事件发生的的元素、鼠标的位置等等,event对象只在事件过程中才有效。

event属性:

altKey

检索ALT键的当前状态

可能的值true为关闭

false为不关闭

button

检索按下的鼠标键

可能的值:0没按键

1按左键

2按右键

3按左右键

4按中间键

5按左键和中间键

6按右键和中间键

7按所有的键

cancelBubble

设置或检索当前事件是否将事件句柄起泡

可能的值:false启用起泡

true取消该事件起泡

clientX

检索与窗口客户区域有关的鼠标光标的X坐标,属性为只读,没有默认值。

clientY

检索与窗口客户区域有关的鼠标光标的Y坐标,属性为只读,没有默认值。

ctrlKey

ctrlKey检索CTRL键的当前状态

可能的值true为关闭

false为不关闭

dataFld

检索被oncellchange事伯影响的列

aTransfer

为拖放操作提供预先定义的剪贴板式。

Element

检索在onmouseover和onmouseout事件期间退出的对象指针

keyCode

设置或检索与引发事件的关键字相关联的Unicode关键字代码

该属性与onkeydownonkeyuponkeypress一起使用

如果没有引发事件的关键字,则该值为0

offsetX

检索与触发事件的对象相关的鼠标位置的水平坐标

offsetY

检索与触发事件的对象相关的鼠标位置的垂直坐标

propertyName

检索在对象上己更改的特性的名称

reason

检索数据源对象数据传输的结果

可能的值:

0数据传输成功

1数据传输失败

2数据传输错误

recordset

检索数据源对象中默认记录集的引用

该特性为只读

repeat

检索一个事件是否被重复

该属性只有在onkeydown事件重复时才返回true

returnvalues

设置或检索从事件中返回的值

可能的值:

true事件中的值被返回

false源对象上事件的默认操作被取消

screenX

检索与用户屏相关的鼠标的水平位置

screenY

检索与用户屏相关的鼠标的垂直位置

shiftKey

检索shiftKey键的当前状态

可能的值true为关闭

false为不关闭

srcElement

检索触发事件的对象

srcFilter

检索导致onfilterchange事件触发的过滤器对象

srcUm

检索触发事件行为的同一资源名称

除非下面两个条件都为真,否则该特性被设置为null

1.行为被附加到触发事件的要素上

2.在前面的项目符号中定义的行为己指定了一个URN标识符和己触发的事件

toElement

检索作为onmouseover或者onmouseout事件结果而移动的对象

type

检索事件对象中的事件名称

x

检索相对于父要素鼠标水平坐标的整数

y

检索相对于父要素鼠标垂直坐标的整数

js

在父窗口中获取iframe中的元素

1.

格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();

实例:window.frames["ifm"].document.getElementById("btnOk").click();

2.

格式:

varobj=document.getElementById("iframe的name").contentWindow;

varifmObj=obj.document.getElementById("iframe中控件的ID");

ifmObj.click();

实例:

varobj=document.getElementById("ifm").contentWindow;

varifmObj=obj.document.getElementById("btnOk");

ifmObj.click();

在iframe中获取父窗口的元素

格式:window.parent.document.getElementById("父窗口的元素ID").click();

实例:window.parent.document.getElementById("btnOk").click();

jquery

在父窗口中获取iframe中的元素

1.

格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery方法1

实例:$("#ifm").contents().find("#btnOk").click();//jquery方法1

2.

格式:$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery方法2

实例:$("#btnOk",document.frames("ifm").document).click();//jquery方法2

在iframe中获取父窗口的元素

格式:$('#父窗口中的元素ID',parent.document).click();

实例:$('#btnOk',parent.document).click();

相关推荐