Get only declared CSS styles for an element

Asked

Viewed 194 times

3

I’m wanting/needing to make a CSS converter for styles inline using only and exclusively technologies client-side.

Researching until I found something, in case is library (jquery.inlineStyler) and is implementing, but it does not attend me as it would like, because it converts all the properties of the style of the element to style inline (including the default browser), which is not what I would like.

What I would like is that the only CSS properties converted to style inline are those declared in the CSS, not all default from the browser to that element.

A simple example of the result I would like:

p {
  color: green;
  background-color: #ccc;
}
p.p2 {
  color: blue;
  font-size: 15pt;
}
<p>Paragrafo</p>
<p class="p2">Paragrafo 2</p>

Where the expected result for this HTML would be:

<p style="color: green;background-color: #ccc;">Paragrafo</p>
<p style="color: blue;background-color: #ccc;font-size: 15pt;">Paragrafo 2</p>

javascript jquery css

1 answer

4

As far as I know there is no simple way (native method or library) to do this. There is no native method for this it is difficult to do this with Javascript because some rules overlap and it is difficult to know which has priority.

But I’ve started an idea that you can carry on if you want and be useful. 

var estilos = document.styleSheets; // CSSStyleSheet.rules
for (var i = 0; i < estilos.length; i++) {
    var regras = estilos[i].rules;
    for (var j = 0; j < regras.length; j++) {
        var str = regras[j].cssText;
        var seletor = str.split('{')[0];
        var style = str.match(/\{([^\{\}]*)\}/)[1];
        aplicar(seletor, style);
    }
}

function aplicar(seletor, regras) {
    console.log(seletor, '-', regras);
    var elementos = document.querySelectorAll(seletor);
    for (var i = 0; i < elementos.length; i++) {
        var el = elementos[i];
        var regrasExistentes = el.getAttribute('style') || '';
        el.setAttribute('style', regrasExistentes + regras);
    }
}

jsFiddle: http://jsfiddle.net/26xfuvm6/

A step that remains to be taken and that I now have no time to do is to check in the inline styles already inserted and compare with the next rule that will be applied to it. It seems that the Browser solves this naturally once the styles are ordered from first to last but I did not have time to test...

  • 1

    It’s a good one, Sergio, after I posted it here that, which is very close to what you suggest, I think that’s the way it is, I’m just trying to analyze the cases as you mentioned of overriding rules, to see how it behaves, but in the example of the question yours and this work.

  • 1

    @Fernando interesting this other solution. Because the overlap cases can be more sharp. I do not know if the document.styleSheets already brings down the defined priorities in case the CSS has no rules in the right order. And then what I’m talking about and I don’t have time to do right now is to check color already exists. In the case of p2 it overlaps and works, but in style HTML are there the two and could extract the old. I hope to have helped!

  • Yes @Sergio, now that I’ve seen this in your code, and analyzing the other one, it seems to solve the duplicate properties by storing them in the JSON object, where the key is the attribute name. But I’m still not sure if this is going to work for more elaborate styles and full of overlap rules. I’m going to look at it here in the meantime. And thank you so much so far for the help, it’s very valuable.

  • 1

    @Fernando comments here if there is something more missing in my code, I don’t have much time today but I would like to improve the answer later to if others want to use too.

Browser other questions tagged javascript jquery css

You are not signed in. Login or sign up in order to post.