特性是DOM构建的一个组成部分，属性是元素保持运行时信息的主要手段。
12.1 DOM特性和DOM属性
使用传统的DOM方法getAttribute和setAttribute，或者使用DOM对象上与之对应的属性，都可以访问到元素的特性值。
e.getAttribute('id');
e.id
设置特性的值，也会改变属性的值。但属性和特性并没用使用同一个值。
使用class字符串可以获取到class特性，但在IE中需要使用className。
for特性使用htmlFor属性进行表示，class属性使用className属性进行表示。其他多单词组成的特性名称由驼峰式的属性名称表示。
在页面元素上定义的自定义特性，不会自动转换为元素属性的表示，需要使用DOM方法进行访问。
因为属性的访问速度比相应的DOM特性方法访问速度要快，所以当不确定一个特性的属性是否存在时，可以先测试再访问。
var value = ele.someValue ? ele.someValue : ele.getAttribute('someValue')
设置/获取特性值的函数：
var translations = {
"for": "htmlFor",
"class": "className"
/*其他多单词特性名称转化*/
};
window.attr = function (ele, name, value) {
var proName = translations[name] || name;
var pro = ele[proName] !== undefined;
if (value !== undefined) {
if (pro) {
ele[proName] = value;
} else {
ele.setAttribute(proName, value);
}
}
if (pro) {
return ele[proName].nodeName ? ele.getAttributeNode(proName).nodeValue : ele[proName];
} else {
return ele.getAttribute(proName);
}
};
12.2 跨浏览器的attribute问题
input元素的id和name特性将作为form元素的属性值进行引用。产生的属性会自动覆盖form元素上的已有的同名属性。
<form id="testID" action="#">
<input type="text" id="id">
<input type="text" name="action">
</form>
console.log(test.id); // <input type="text" id="id">
可以通过获取描述元素特性本身的原始DOM节点，然后获取该节点的值解决这个问题。
ele.getAttributeNode(proName).nodeValue
在HTML文档中，nodeName属性返回的元素名称都将是大写的，使用前可转为小写。
ele.nodeName.toLowerCase();
12.3 样式特性
元素的style对象属性不会反应从CSS样式表中继承的任何样式信息。style属性中的任何一个样式的优先级都要高于样式表中所继承的样式。
多单词的CSS样式名称作为属性时，会转换为驼峰式命名。利用正则表达式定义一个转换方法：
function aboutStyle(ele, name, value) {
// 获取float属性时，IE使用的是styleFloat属性，其他浏览器使用的是cssFloat属性。
if (name === 'float') {
name = ele.style['cssFloat'] ? 'cssFloat' : 'styleFloat';
} else {
name = name.replace(/-(a-z)/ig, function (all, letter) {
return letter.toUpperCase();
});
}
// 有些属性的值为数字，不带px之类的单位，以下为其中一部分
var translations = {
zIndex: 'zIndex',
fontWeight: 'fontWeight',
opacity: 'opacity',
zoom: 'zoom',
lineHeight: 'lineHeight'
};
if (!translations[name] && typeof value === 'number') {
ele.style[name] = value + 'px';
return ele.style[name]
}
if (value !== undefined) {
ele.style[name] = value
}
return ele.style[name]
}
在非显示元素上，只要尝试获取offsetWidth或offsetHeight属性值，结果都是0。使用以下方法可以获取隐藏元素的宽高。
(function () {
var PROPERTIES = {
position: 'absolute',
visibility: 'hidden',
display: 'block'
};
// 将元素的display设置为block，visibility设置为hidden，position设置为absolute，再获取元素尺寸，完成后再还原。
function getDimensions(ele) {
var pre = {};
for (var i in PROPERTIES) {
pre[i] = ele.style[i];
ele.style[i] = PROPERTIES[i];
}
var result = {
width: ele.offsetWidth,
height: ele.offsetHeight
};
for (var j in pre) {
ele.style[j] = pre[j];
}
return result
}
})();
获取opacity的值时，支持opacity的浏览器会将其值规范为小于1.0且以0开头的值，例如指定opacity值为.5，支持opacity的浏览器会将其规范为0.5。不支持的则返回原有形式.5。以此可以判断浏览器是否支持opacity。
定义一个获取opacity值的函数。
function getOpacity(ele) {
var div = document.createElement('div');
div.setAttribute('style', 'opacity: .5');
var opacitySupported = div.style.opacity === '0.5';
if (opacitySupported) {
return ele.style.opacity || 1;
} else {
var opacity = ele.style.filter || 1;
opacity = opacity.match(/alpha\(opacity=(\S*)\)/)[1];
return parseFloat(opacity / 100);
}
}`
12.4 获取计算样式
window.getComputedStyle()方法接收一个要进行样式计算的元素，并返回一个可以进行属性查询的接口，返回的接口提供了一个名为getPropertyValue()的方法，用于检索特定样式属性的计算样式。getPropertyValue()的方法直接接收CSS属性名称，不需要驼峰式转换。IE9之前的版本使用元素的currentStyle属性获取元素的实时计算样式信息。定义一个获取元素样式的方法。
function fetchComputedStyle(ele, property) {
if (window.getComputedStyle) {
var computedStyle = window.getComputedStyle(ele);
if (computedStyle) {
property = property.replace(/([A-Z])/g, '-$1').toLowerCase();
return computedStyle.getPropertyValue(property);
}
} else if (ele.currentStyle) {
property = property.replace(/-(a-z)/ig, function (all, letter) {
return letter.toUpperCase();
});
return ele.currentStyle[property];
}
}
获取属性时，应当检索的是底层的单个属性，例如不能检索border，而应当检索border-top-color这样的属性。
网友评论