Получить оригинальные имена стилей, используя DOM's element.style

Question

При ответе на этот вопрос Парсер DOM: удалить только определенные атрибуты Я заметил, что некоторые свойства расширены и преобразованы в свойство element.style.Например:

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

style этого div содержит одно свойство, font-weight, как и следовало ожидать.Однако:

<div style="font-decoration: underline"></div>

Для этого div свойство style в Firefox содержит четыре свойства: -moz-text-blink, -moz-text-decoration-color, -moz-text-decoration-line, -moz-text-decoration-style.

Это единственный способ получить исходный font-decoration для самостоятельного разбора атрибута style, или есть лучший способ?Стоит ли самому разбирать его или есть "стандартный" способ сделать это?

Answer 1

Вы можете использовать свойство outerHTML элемента ( см. Этот вопрос для обсуждения по 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')) + ']';

Answer 2

Что ж, я провел еще какое-то исследование и нашел лучшее решение для вашего требования. Вы можете получить стиль, определенный в HTML, просто используя:

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

Это хорошо работает в FF, Chrome и IE (протестировано только в IE9).