DOM系统学习-表格、样式和元素大小
操作表格
属性:
caption 标题元素
tHead 表头元素
tFoot 表尾元素
tBodies 主体元素集合,通过下标取
row 行元素集合,通过下标取
方法:
createCaption()
createTHead()
createTFoot()
deleteCaption()
deleteTHead()
deleteTFoot()
deleteRow(pos)
insertRow(pos)
tbody的属性和方法:
rows 行集合
deleteRow(pos) 删除第几行
insertRow(pos) 插入行到那个位置
tr的属性和方法:
cells 单元格集合
deleteCell(pos) 删除单元格
insertCell(pos) 插入单元格到那个位置
注意:
不支持td,tbody方法
操作样式
检查dom2级css能力:
1 | document.implementation.hasFeature( 'CSS2' , '2.0' ); |
访问元素的样式:
行内样式:
调用方式
style.color,style.fontSize,style[font-size]
属性
cssText css文本内容
length 样式个数
方法
getPropertyPriority(name) 含有important则返回important
getPropertyValue(name) 获取属性值
setProperty(name,v,p) 设置属性
removeProperty(name) 移除属性
获取计算后的样式:
IE不支持getComputedStyle
IE支持currentStyle属性
1 | var style = window.getComputedStyle ? window.getComputedStyle(table, null ) : null || table.currentStyle; |
操作样式表:
基本方式
ele.id
ele.className
三个定义方法
是否存在class
1 2 3 4 | //判断是否存在这个class function hasClass(element, className) { return element.className.match( new RegExp( '(\\s|^)' + className + '(\\s|$)' )); } |
添加class
1 2 3 4 5 6 | //添加一个class,如果不存在的话 function addClass(element, className) { if (!hasClass(element, className)) { element.className += " " + className; } } |
删除class
1 2 3 4 5 6 | //删除一个class,如果存在的话 function removeClass(element, className) { if (hasClass(element, className)) { element.className = element.className.replace( new RegExp( '(\\s|^)' + className + '(\\s|$)' ), ' ' ); } } |
HTMLLinkElement,HTMLStyleElement
1 | var link = document.getElementsByTagName( 'link' )[0]; |
sheet属性兼容
非IE使用sheet
IE使用styleSheet
1 | var sheet = link.sheet || link.styleSheet; |
css规则
非IE sheet.clssRules、sheet.deleteRule()、sheet.insertRule()
IE sheet.rules、sheet.removeRule()、sheet.addRule()
1 2 3 4 5 6 7 8 9 | function insertRule(sheet, selectorText, cssText, position) { //如果是非IE if (sheet.insertRule) { sheet.insertRule(selectorText + "{" + cssText + "}" , position); //如果是IE } else if (sheet.addRule) { sheet.addRule(selectorText, cssText, position); } } |
1 2 3 4 5 6 7 8 9 | function deleteRule(sheet, index) { //如果是非IE if (sheet.deleteRule) { sheet.deleteRule(index); //如果是IE } else if (sheet.removeRule) { sheet.removeRule(index); } } |
获取元素
CSS大小:
通过style内联获取元素大小
ele.style.width、 ele.style.height
通过计算元素大小
1 | var style = window.getComputedStyle ? window.getComputedStyle(table, null ) : null || table.currentStyle; |
sytle.width、style.height
通过CSSStyleSheet
1 2 | var sheet = document.styleSheets[0]; //获取link 或style var rule = (sheet.cssRules || sheet.rules)[0]; //获取第一条规则 |
rule.style.width、rule.style.height
实际大小:
元素可视区大小 内容+内边距
ele.clientWidth、ele.clientHeight
元素滚动内容大小 滚动条
ele.scrollWidth、ele.scrollHeight
元素实际大小 内容+内边距+边框+滚动条
ele.offsetWidth、ele.offsetHeight
周边大小:
边框大小 不支持右下
ele.clientLeft、ele.clientTop
相对父元素的位置
ele.offsetLeft、ele.offsetTop
滚动条被隐藏的大小
ele.scrollLeft、ele.scrollTop