Javascript 使用DOM'获取原始样式名称；s元素风格

在回答这个问题时，我注意到一些属性在

元素.style

属性中进行了扩展和转换。例如：

<div style="font-weight: bold"></div>

对于这个div，Firefox中的

-style

属性包含四个属性：

-moz-text-blink

，

-moz-text-decoration-color

，

-moz-text-decoration-line

，

-moz-text-decoration-style

---

获取原始

字体装饰的唯一方法是自己解析样式属性，还是有更好的方法？我应该自己解析它，还是有一种“标准”的方法来解析它？
您可以使用元素（）的
outerHTML
属性并从中解析样式值：

检查这把小提琴：

完整代码：

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')) + ']';

函数outerHTML（节点）{
返回node.outerHTML | | new XMLSerializer（）.serializeToString（节点）；
}
函数字符串{
变量l=0，r=s。长度-1；
而（ll&s[r]=''）r-=1；
返回s.子串（l，r+1）；
}
函数getStyleAsInHTML（节点）{
变量部分，部分，sIndex=-1，i，style=''，delim；
零件=外部TML（节点）；
零件=零件。替换（/\s/g，“”）；
parts=parts.split（'='）；
对于（i=0；i=5&&part.substring（part.length-5）.toLowerCase（）=='style'）{
sIndex=i+1；
打破
}
}
如果（sIndex！=-1&&sIndex0；i--）{
if（style.charAt（i）=delim）{
style=style.substring（1，i）；
打破
}
}
}
回归风格；
}
document.getElementById（'result'）.innerHTML='样式如HTML['+getStyleAsInHTML（document.getElementById（'d2'））+']；
嗯，我对这件事做了更多的研究，找到了一种更好的解决方案来满足您的需求。您只需使用以下命令即可获得HTML中定义的样式：

if(document.getElementById('foo').attributes['style'])    
  style = document.getElementById('foo').attributes['style'].value;

这在FF、Chrome和IE中运行良好（仅在IE9中测试）。
我认为没有办法解决这个问题，firefox添加了自己的规则，如果在safari中测试，它也会有这些规则。换句话说，“没有比自己解析更好的方法了”。感谢您发布代码，不过在它真正可用之前，还需要将style属性解析为组件。这是一个巨大的耻辱，因为浏览器已经测试了代码来完成这项工作。是的，必须手动解析。浏览器版本的“已解析”对象（即obj.style）将仅包含从HTML传入的样式的特定于浏览器的版本（即仅在特定浏览器中工作的变体）。
if(document.getElementById('foo').attributes['style'])    
  style = document.getElementById('foo').attributes['style'].value;