操作表格
属性：
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
|
//判断是否存在这个classfunction 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