Obtain original style names using DOM's element.style

Question

While answering this question DOM parser: remove certain attributes only I noticed that some properties are expanded and transformed in the element.style property. For example:

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

The style of this div contains one property, font-weight, as one might expect. However:

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

For this div, the style property, in Firefox, contains four properties: -moz-text-blink, -moz-text-decoration-color, -moz-text-decoration-line, -moz-text-decoration-style.

Is the only way to obtain the original font-decoration to parse the style attribute myself, or is there a better way? Should I parse it myself, or is there a "standard" way of doing this?

I think there is no way to deal with this, firefox add its own rules, if you test it in safari it will have those too. — Pluda, Oct 21 '11 at 13:36

score 1 · Answer 1 · edited May 23 '17 at 12:11

You can use the outerHTML property of the element (see this question for a discussion on outerHTML) and parse the style value from it:

Check this fiddle: http://jsfiddle.net/DRx88/

Full Code:

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

In other words, "no, there is no better way than parsing it myself". Thanks for posting the code, though before it's truly usable it needs to also parse the style attribute into components. Which is a huge shame, because the browser already has tested code for doing exactly that. — Roman Starkov, Dec 22 '11 at 11:19

techfoobar · Accepted Answer · 2011-12-22T13:09:55.523

0

Well, I did some more research on the thing and found a way better solution to your requirement. You can get the style as defined in HTML by just using:

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

This works well in FF, Chrome and IE (tested in IE9 only).

edited Dec 22 '11 at 13:09

answered Dec 22 '11 at 12:22

techfoobar

65,616
14
114
135

Yes, that will have to be parsed manually. The browser's version of the 'parsed' object (i.e. obj.style) will contain only browser specific versions of the styles passed in from HTML (i.e. only those variants that work in that specific browser). – techfoobar Dec 22 '11 at 17:22

Obtain original style names using DOM's element.style

2 Answers2