在回答这个问题DOM parser: remove certain attributes only时,我注意到某些属性已在element.style
属性中展开和转换。例如:
<div style="font-weight: bold"></div>
此div的style
包含一个属性font-weight
,正如人们所期望的那样。但是:
<div style="font-decoration: underline"></div>
对于此div,Firefox中的style
属性包含四个属性:-moz-text-blink
,-moz-text-decoration-color
,-moz-text-decoration-line
,-moz-text-decoration-style
。
获取原始font-decoration
的唯一方法是自己解析style属性,还是有更好的方法?我应该自己解析一下,还是采用“标准”的方式来做到这一点?
答案 0 :(得分:1)
您可以使用元素的outerHTML
属性(see this question for a discussion on outerHTML)并从中解析样式值:
检查这个小提琴:http://jsfiddle.net/DRx88/
完整代码:
function outerHTML(node){
return node.outerHTML || new XMLSerializer().serializeToString(node);
}
function trimString(s) {
var l = 0, r = s.length - 1;
while(l < s.length && s[l] == ' ') l++;
while(r > l && s[r] == ' ') r -= 1;
return s.substring(l, r + 1);
}
function getStyleAsInHTML(node) {
var parts, part, sIndex = -1, i, style = '', delim;
parts = outerHTML(node);
parts = parts.replace(/\s/g," ");
parts = parts.split('=');
for(i=0; i<parts.length; i++) {
part = trimString(parts[i]);
if(part.length >= 5 && part.substring(part.length-5).toLowerCase()=='style') {
sIndex = i+1;
break;
}
}
if(sIndex!=-1 && sIndex<parts.length) {
style = parts[sIndex];
delim = style.charAt(0);
for(i=style.length-1; i>0; i--) {
if(style.charAt(i)==delim) {
style = style.substring(1, i);
break;
}
}
}
return style;
}
document.getElementById('result').innerHTML = 'Style as in HTML [' + getStyleAsInHTML(document.getElementById('d2')) + ']';
答案 1 :(得分:0)
好吧,我对这件事做了一些更多的研究,并找到了更好的解决方案来满足你的要求。您只需使用以下命令即可获得HTML中定义的样式:
if(document.getElementById('foo').attributes['style'])
style = document.getElementById('foo').attributes['style'].value;
这适用于FF,Chrome和IE(仅在IE9中测试)。