js获取元素到文档区域document的坐标方法_框架

获取页面中元素到文档区域document的横向纵向坐标的两种方法及其比较

在js控制元素运动的过程中对于页面元素坐标位置的获取是经常用到的这里主要总结下两种方法

一通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现

在阅读javascript高级程序设计第三版DOM部分时了解到要获取某个元素在页面上的偏移量需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加一直循环直至根元素所以要得到元素到文档区域的坐标位置只需通过while循环不断获取offsetParent的offsetLeft/offsetTop直到offsetParent = null为止

js代码

代码如下:

// 获取元素到文档区域的坐标

function getPosition(element) {

var actualLeft = element offsetLeft

actualTop = element offsetTop

current = element offsetParent; // 取得元素的offsetParent

// 一直循环直到根元素

while (current !== null) {

actualLeft += current offsetLeft;

actualTop += current offsetTop;

current = current offsetParent;

}

// 返回包含left top坐标的对象

return {

left: actualLeft

top: actualTop

};

}

例子截图

firebug下测试结果截图 (注其他浏览器已通过测试!)

二通过 getBoundingClientRect() 方法实现

getBoundingClientRect方法用于获得页面中某个元素的左上右和下分别相对浏览器视窗window的位置返回的是一个对象该对象有四个属性 top left right bottom;该方法原本是IE Only的但是FF +和Opera +已经支持了该方法可以说在获得页面元素位置上效率有很大的提高另外该方法避免使用while循环而是直接获取数值来实现比第一种方法性能要好特别是在复杂的页面上更为明显

js代码

代码如下:

// 获取元素到文档区域的坐标

function getPosition(element){

var dc = document

rec = element getBoundingClientRect()

_x = rec left // 获取元素相对浏览器视窗window的左上坐标

_y = rec top;

// 与或body元素的滚动距离相加就是元素相对于文档区域document的坐标位置

_x += dc documentElement scrollLeft || dc body scrollLeft;

_y += dc documentElement scrollTop || dc body scrollTop;

return {

left: _x

top: _y

};

}

经测试该方法与第一种方法获取元素相对于document的坐标大小相同对于IE低版本浏览器存在一些差异

注意记得要累加上(IE除外)或body(针对IE)元素的水平或垂直滚动距离!

lishixinzhi/Article/program/Java/JSP/201311/20207

数据类型可以直接用typeof来获取。

typeof返回数据类型，返回结果为字符串，根据字符串可以知道具体的类型。

例如："var a=1;typeof a;"，则返回"number"，即数字类型。

使用css控制页面有4种方式，分别为行内样式(内联样式)、内嵌式、链接式、导入式。

行内样式(内联样式)即写在html标签中的style属性中，如<div style="width:100px;height:100px;"></div>

内嵌样式即写在style标签中，例如<style type="text/css">div{width:100px; height:100px}</style>

链接式即为用link标签引入css文件，例如<link href="testcss" type="text/css" rel="stylesheet" />

导入式即为用import引入css文件，例如@import url("testcss")

如果想用javascript获取一个元素的样式信息，首先想到的应该是元素的style属性。但是元素的style属性仅仅代表了元素的内联样式，如果一个元素的部分样式信息写在内联样式中，一部分写在外部的css文件中，通过style属性是不能获取到元素的完整样式信息的。因此，需要使用元素的计算样式才获取元素的样式信息。

getElementById()

// 通过ID来取得元素，所以只能访问设置了ID的元素，比如说有一个DIV的ID为docid：

// <div id="docid"></div>

// 那么就可以用getElementById("docid")来获得这个元素。getElementsByName()

// 通过NAME来获得元素，DOCUMENT中元素的NAME可以重复，如果一个文档中有两个以上的标// 签NAME相同，那么getElementsByName()就可以取得这些元素组成一个数组。

// 比如有两个DIV：

// <div name="docname" id="docid1"></div>

// <div name="docname" id="docid2"></div>

// 那么可以用getElementsByName("docname")获得这两个DIV，用getElementsByName("docname")[0]访问第一个DIV。getElementsByTagName()

// 通过TAGNAME（标签名称）来获得元素，一个DOCUMENT中会有相同的标签，所以这个方法也是取得一个数组。

// 可以用 getElementsByTagName("div")来访问它们，用getElementsByTagName("div")[0]访问第一个 DIV，用getElementsByTagName("div")[1]访问第二个DIV。

本文实例讲述了JavaScript获取页面中第一个锚定文本的方法。分享给大家供大家参考。具体如下：

下面的JS代码通过documentarchors数组获取第一个archor的innerHTML

<!DOCTYPE

html>

<html>

<body>

name="html">jb51net</a><br>

name="css">CSS

Tutorial</a><br>

name="xml">XML

Tutorial</a>

<p>innerHTML

the

first

anchor:

documentwrite(documentanchors[0]innerHTML);

</script>

</p>

</body>

</html>

上面的代码输出：

jb51net

希望本文所述对大家的javascript程序设计有所帮助。

javascript获取表单中的值？

如获取form 表单下<input type='text' name='filename'>中的值

两种方法：

1、documentgetElementById("filename")value

2、documentformfilenamevalue

lotus的表单中，通过JavaScript获取表单中的指定域值？

js:documentforms[0]xxvalue就可以了

xx为表单中的域的名称！

如何用js获取表单中的值

给表单中的元素设置id属性，js：

var value = documentgetElementById("你的元素的id")value;

php如何获取表单中textarea的值？

</form>

dophp

<php

$intext = $_POST['intext'];

怎样获取form表单中input的值

给input添加 id 例如 <input id="myInput" value="" type=text/>

var aa = documentgetElementById("myInput")val();或者用jquery $("#myInput")val();

ExtJS中怎样获取Form表单中的每一项的值

ExtJS中有事需要获得Form表单的值，根据API可知 getValues() 可以获得单签Form表单中所有 Name 值的一个对象。

片段代码如下：

var formValues=formpanelgetForm()getValues(); 获取表单中的所有Name键/值对对象

alert(formValues["firstname"]); 输出表单中 firstname 字段的值

consolelog(formValues); 输出结果是表单中的所有Name键/值对的一个对象

整体代码如下：

Created with JetBrains PhpStorm

User: std

Date: 13-6-9

Time: 上午10:55

To change this template use File | Settings | File Templates

ExtonReady(function(){

var formpanel=Extcreate("ExtformPanel",{

title:"Dynamic Form",

draggable:true,

frame:true,

width:330,

height:255,

autoHeight:true,

bodyPadding:"7 5 7 5",

items:[{

xtype:"fieldset",

frame:true,

title:"Contact Information",

defaultType: 'textfield',

defaults:{xtype:"textfield",labelWidth:80,labelAlign:"right",width:280},

items:[{

fieldLabel:"First Name",emptyText:"First Name",name:"firstname"

},{

fieldLabel:"Last Name",emptyText:"Last Name",name:"lastname"

},{

fieldLabel:"Company",emptyText:"Company",name:"pany"

},{

fieldLabel:"Email",emptyText:"Email",name:"email"

},{

fieldLabel:"State",xtype:"bobox",emptyText:"请选择",name:"state"

},{

fieldLabel:"Date of Birth",xtype:"datefield",emptyText:"请选择日期",name:"dateofbirth"

}]

}],

buttons:[

{text:"确定",handler:function(){

var formValues=formpanelgetForm()getValues();

alert(formValues["firstname"]);

consolelog(formValues);

}},

{text:"取消"}

]

});

formpanelrender(ExtgetBody());

});

直接在每一项的组件里面添加一个 id

id:'textId'

ExtgetCmp('textId')getValue()

怎样用jQuery获取表单中的值并赋给数组

类似这样

var i=0;

var fields = $("input")serializeArray();

jQueryeach(fields, function(index, field){inf[i]=fieldvalue;i++;});

在php中怎样获取表单中文件域的值

获取到的POST、GET是数组形式的值，需要通过键值来详细获取相应的值

比如： indexphp 页面

下面是POST方法

</form>

<php

获取表单提交的数据

$contents = $_POST['contents'];

echo $contents;

也可以是下面是GET方法

</form>

<php

获取表单提交的数据

$contents = $_GET['contents'];

echo $contents;

POST相对于GET方法，更好一些，可以提交大量数据，以及更安全些。

用typeof(var) 来返回一个数据类型\x0d\返回的可能值有\x0d\'undefined- 如果变量是 Undefined 类型的\x0d\'boolean- 如果变量是 Boolean 类型的\x0d\'number- 如果变量是 Number 类型的\x0d\'string- 如果变量是 String 类型的\x0d\'object- 如果变量是一种引用类型或 Null 类型的\x0d\\x0d\if(typeof(123)=='number')alert('this is a number')\x0d\以此类推

javascript

获取event

先从一个简单的例子说起，一个简单的button控件如下:

<input

type='button'

name='mybtn'

id='mybtn'

onclick='myFunc()'/>

然后为其注册事件，这样的情况，怎么在javascript里获取event呢，特别是firefox的情况。请看:

<script

type='text/javascript'>

function

myFunc(){

var

windowevent

argumentscalleecallerarguments[0]

,et

evsrcElement

evtarget;

alert(ettagName);

}

</script>

不出意外的话，在ie/ff下，上面例子都将输出INPUT,即是触发click事件节点的标签名，ie的event获取这里就不说了，重点说说ff下的情况。

这里的argumentscalleecallerarguments[0]看起来又长又怪，为什么在firefox的情况下，这个东西就是event呢？

首先得了解argumentscallee是什么东西,caller又是什么样的属性？

argmentscallee就是函数体本身，argumentscalleecaller就是函数体的调用函数体

简单例子如下:

<script

type='text/javascript'>

function

a(){

b();

}

function

b(){

alert(b

===

argumentscallee)

alert(bcaller

===

alert(argumentscalleecaller

===

}

a();

</script>

不出意外，上面的例子将输出3个true,表明当a()调用时，函数b与函数a的关系。

好，弄清楚了argumentscallee与caller，我们再把原先的例子改改

<script

type='text/javascript'>

function

myFunc(){

alert(argumentscalleecallertoString())

var

windowevent

argumentscalleecallerarguments[0]

,et

evsrcElement

evtarget;

}

</script>

我们把argumentcalleecaller的函数体输出，看看到底在ie和ff下有何区别

可以看到ie下输出为

function

anonymous(){

myFunc()

}

ff下输出为

function

onclick(event){

myFunc();

}

由此看出在html控件中直接注册事件在ie/ff下表现的不同，

ie下定义了一个匿名函数，内部再执行用户定制的函数(myFunc)，而ff下则有所

不同，首先ff下定义了一个与节点事件同名的函数,这里是onclick事件，所以是function

onclick,然后event作为一个参数传入，内部再执行myFunc

所以当事件触发时，在myFunc里，argumentcalleecaller就是指向function

onclick，当然，argumentcalleecallerarguments[0]即为event了

以上这篇火狐和ie下获取javascript

获取event的方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

以上就是关于js获取元素到文档区域document的坐标方法全部的内容，包括:js获取元素到文档区域document的坐标方法、JavaScript数据类型怎么获取、如何javascript获取css中的样式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/9343924.html

js获取元素到文档区域document的坐标方法

发表评论

评论列表（0条）