Question

For instance:

Here is a style object:

{
    font: normal normal bold 14px/14px arial,
    color: black
}

I would like the corrected object to be something like:

{
    fontStyle: normal,
    fontVariant: normal,
    fontWeight: bold,
    fontSize: 14px,
    lineHeight: 14px,
    fontFamily: arial,
    color: black
}

I could easily split the string up and parse out each property, but sometimes all properties might not be present. You may, for example receive a style object that is something like:

{
    font: bold 14px arial
}

Thanks!

Answer 1

If the style has actually been applied to an element, then on current browsers you can use:

window.getComputedStyle(el).getPropertyValue(...)

to extract the value of the individual fields (e.g. font-family, line-height)