JS认为HTML文件会被浏览器解析为文档流，写在HTML里面的所有标签元素都可以从文档流中读取到。基于这个理论，JS定义了一个document对象，专门用来处理文档流。
要想获取一个元素，有两种方式：一种是根据元素的类名（class属性值），另一种是根据元素的ID。假设有一个input元素，JS获取该元素的方式如下：
<input class="isInput" id="input_first">
var element=documentgetElementByClass("isInput")[0];或者
var element=documentgetElementById("input_first");
需要注意的是，根据类名获取到的是一个数组，必须要通过下标才能获取到具体的某个元素。而根据ID获取到的则是具体的元素，所以常用的方式是用ID来获取。
js获取html元素的方式
+通过ID获取：getElementById('id属性值')
+通过标签名：getElementsByTagName('标签名')
+通过类名：getElementsByClassName('类名')
+通过name属性：getElementsByName('name属性值')
+通过选择器获取一个元素：querySelector
+通过选择器获取一组元素：querySelectorAll
1获取id值为d1的html元素
将获取到的html元素称为DOM节点对象，必须传参数，参数是string类型，是获取元素的id。返回值只获取到一个元素，没有找到返回null。
2通过标签名：getElementsByTagName('标签名')
参数是是获取元素的标签名属性，不区分大小写，根据标签名获取html元素， 返回的是一个数组(伪数组)
通过类名：getElementsByClassName('类名')
参数是元素的类名，返回值是一个类数组，没有找到返回空数组。
通过类名：getElementsByClassName('类名')
必须传参数，参数是是获取元素的name属性，返回值是一个类数组，没有找到返回空数组。
通过选择器获取一个元素：querySelector
参数是选择器，返回值只获取到第一个元素。
通过选择器获取一组元素：querySelectorAll
参数是选择器，返回值是一个数组。
首先介绍几个属性（都是jquery的属性，可以免去兼容性的烦恼）
1 网页被卷起来的高度/宽度（即浏览器上方隐藏的页面内容高度）
2 浏览器工作区域的高度和宽度
3 元素距离文档顶端和左边的偏移值
4 页面的文档高度
参考文章 >
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
<!--
var MaxLeft = 1000; //最大边距值
var Stepping = 100; //步进边距值
/上面的值可以改动， 下面的代码就不要改了/
var Margin = 0; //原边距
$ = function( id ) { return documentgetElementById( id );}
windowonload = function() {
$('a')onclick = function(){
Margin = parseInt( $('b')styleleft ); //取得B元素当前左边距
if ( Margin >= MaxLeft ) { //如果当前边距大于等于设定的最大边距
$('b')styleleft = '0px'; //设置左边距为0
$('view')innerHTML = 0; //这个只是个显示作用， 可以删除
} else { //否则
$('b')styleleft = (Margin + Stepping) + 'px'; //给原边距加上设定的步进值
$('view')innerHTML = (Margin + Stepping); //这个只是个显示作用， 可以删除
}
};
};
//-->
</script>
</head>
<body>
<button type="button" id="a">A元素</button>
<div id="b" style="width:500px;height:350px; background:#060; position:relative;z-index:0;top:100px;left:0px; line-height:350px;color:#fff; font-weight:bold; text-align:center">B元素，左边距：<span id="view">0</span>px</div>
</body>
</html>
经过测试， 在ie12、 360极速和兼容模式下都正常运行， 其他浏览器就不知道了， 没有测试！
是这样的，一开始需要获取某一个元素的 left 值，我就用 elestyleleft 去获取了（基础不扎实还好意思来丢人），然后居然返回的是空。
好吧，追本溯源，问题的根源以及区别就在这里了。
所以，我那样是获取不到某一个元素的一个其他方式设置的样式属性值的，所以我就打算谷歌一下别的方法了。
特点：
- 只可读，但是可以读取所有的样式属性值。但是不能通过该方法去设置样式属性值。
currentStyle 获取的是一个元素的所有的样式属性值，这一点功能是与 getComputedStyle() 一样的，但是在获取某一个具体的属性的时候，可以结合 getAttribute 来实现。
和 getComputedStyle 方法不同的是，currentStyle 要获得属性名的话必须采用驼峰式的写法。也就是如果我需要获取 font-size 属性，那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值，就必须将属性名转为驼峰形式。 ( 感谢这篇文章。 )
关于 getComputedStyle 返回的值，具体查看这里。
不管你最初定义的样式是什么，涉及到宽度高度之类的，返回的都是最后实际使用的宽度和高度。
关于 elestyle 的返回值，是和定义的样式的值相等的，如果设置为auto，就直接返回auto。
然后是元素的高宽，对于一个没有设定高宽的元素而言，在 IE678 下使用 getPropertyValue("width|height") 得到的是 auto 。而标准浏览器会直接返回它的 px 值，当然我们希望在 IE 下也返回 px 值。
这里的 HACK 方法是使用 elementgetBoundingClientRect() 方法。
elementgetBoundingClientRect() -- 可以获得元素四个点相对于文档视图左上角的值 top、left、bottom、right ，通过计算就可以容易地获得准确的元素大小。
参考链接 chokcoco的博客园
获取页面中元素到文档区域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
使用styleheight最坑的就是height必须使用行内样式，使用内联式和外嵌式是不行的
1height在 <style> 标签中设置，使用 styleheight 是获取不到值的
2使用外部导入的css同样也获取不到
3只有在行内才能获取到值
这个属性是只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。
clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算
可以使行内、内联和外嵌
HTMLElementoffsetHeight是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数
用于判定元素是否滚动到底
如果元素滚动到底，下面等式返回true，没有则返回false
通过js动态获取屏幕的宽度（documentclientWidth）然后根据屏幕宽度动态计算出rem的实际值。
假设，640px的设备 1rem = 100px
公式： rem = documentclientWidth / 640 100px;
以上就是关于js怎么获取一个元素全部的内容，包括:js怎么获取一个元素、js获取html元素的方式、js获取元素距离浏览器顶端的距离等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）