JS DOM,常用元素属性
2017-12-15 14:20
337 查看
常用元素属性
offsetParent 离当前元素最近的一个有定位属性的父节点如果没有定位父级,默认是body
ie7以下,如果当前元素没有定位默认是body,如果有定位则是html
ie7以下,如果当前元素的某个父级触发了layout,那么offsetParent就会被指向到这个触发了layout特性的父节点上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div {padding: 40px 50px;} #div1 {background: red; position: relative;} #div2 {background: green;} #div3 {background: orange;} </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> <script> var oDiv3 = document.getElementById('div3'); alert(oDiv3.offsetParent.id); </script> </body> </html>
元素offsetLeft[Top] : 只读 属性 当前元素到定位父级的距离(偏移值)
到当前元素的offsetParent的距离
如果没有定位父级
offsetParent —》body
offsetLeft —》 html
如果有定位父级
ie7以下:如果自己没有定位,那么offsetLeft[Top]是到body的距离
如果自己有定位,那么就是到定位父级的距离
其他:到定位父级的距离
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> div {padding: 40px 50px;} #div1 {background: red;} #div2 {background: green; position: relative;} #div3 {background: orange; position: relative;} </style> <script> window.onload = function() { var oDiv3 = document.getElementById('div3'); alert( oDiv3.offsetTop ); } </script> </head> <body id="body1"> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> </body> </html>
style.width, 行间宽样式
clientWidth, 宽 + padding
offsetWidth, 宽 + padding + border
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{height: 100px; border:2px solid #000; padding:10px; margin:10px;} </style> </head> <body> <div id="box" style="width:200px;"></div> <script> var oBox = document.getElementById('box'); alert(oBox.style.width); //200 行间宽样式 alert(oBox.clientWidth); //220 宽 + padding = 220 alert(oBox.offsetWidth); //224 宽 + padding + border = 224 </script> </body> </html>
获取、修改,设置元素值,有以下三种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text" id="text" value="123456"> <script> var oText = document.getElementById('text'); //第一种 oText.value; //获取元素指定的值 oText.value = '654321'; //改变该元素的值 //第二种 oText['value']; //获取元素指定的值 oText['value'] = '1234'; //改变该元素的值 //第三种 oText.getAttribute('value'); //获取元素指定的值 oText.setAttribute('value','hello'); //改变该元素的值 oText.removeAttribute('value'); //删除元素下指定的属性 </script> </body> </html>
相关文章推荐
- [js高手之路] dom常用节点属性兼容性详解与应用
- JS操作DOM元素属性和方法(转)
- JS原生属性选择器querySelector----通过href属性获取对应a标签的Dom元素
- JS DOM元素可以通过.来访问的属性
- JS操作DOM元素属性和方法
- JS操作DOM元素属性和方法
- 快速解决js动态改变dom元素属性后页面及时渲染的问题
- JS 47 object is not a function 访问dom元素属性 FileUpload 对象
- js操作dom元素的重要属性和方法
- js基础之DOM中document对象的常用属性方法详解
- 浅谈原生JS操作DOM常用的属性和方法
- js 获得dom元素class属性
- JS操作DOM元素属性和方法
- JS操作DOM元素属性和方法
- JS DOM常用对象的属性和方法
- js基础之DOM中document对象的常用属性方法
- JS-DOM模型中元素的位置、尺寸属性
- JS笔记-熟悉DOM元素中的各种属性
- 动态创建Dom元素,并设置属性和类----JS&JQ
- [js高手之路] dom常用节点属性兼容性详解与应用