Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Fonte Link

Estou querendo/necessitando fazer um conversor de CSS para estilos inline utilizando único e exclusivamente tecnologias client-side.

Pesquisando até encontrei algum coisa, no caso está biblioteca (jquery.inlineStyler) e está implementaçãoestá implementação, mais não me atende como gostaria, pois ele converte todas as propriedades do style do elemento para style inline (inclusive as default do browser), que não é o que eu gostaria.

O que eu gostaria era que as unicas propriedades CSS convertidas para style inline sejam as declaradas no CSS, e não todas as default do browser para aquele elemento.

Um exemplo simples do resultado que gostaria:

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

Onde o resultado esperado para esse HTML seria:

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

Estou querendo/necessitando fazer um conversor de CSS para estilos inline utilizando único e exclusivamente tecnologias client-side.

Pesquisando até encontrei algum coisa, no caso está biblioteca (jquery.inlineStyler) e está implementação, mais não me atende como gostaria, pois ele converte todas as propriedades do style do elemento para style inline (inclusive as default do browser), que não é o que eu gostaria.

O que eu gostaria era que as unicas propriedades CSS convertidas para style inline sejam as declaradas no CSS, e não todas as default do browser para aquele elemento.

Um exemplo simples do resultado que gostaria:

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

Onde o resultado esperado para esse HTML seria:

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

Estou querendo/necessitando fazer um conversor de CSS para estilos inline utilizando único e exclusivamente tecnologias client-side.

Pesquisando até encontrei algum coisa, no caso está biblioteca (jquery.inlineStyler) e está implementação, mais não me atende como gostaria, pois ele converte todas as propriedades do style do elemento para style inline (inclusive as default do browser), que não é o que eu gostaria.

O que eu gostaria era que as unicas propriedades CSS convertidas para style inline sejam as declaradas no CSS, e não todas as default do browser para aquele elemento.

Um exemplo simples do resultado que gostaria:

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

Onde o resultado esperado para esse HTML seria:

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

Fonte Link
Fernando Leal
  • 10mil
  • 5
  • 44
  • 93

Obter apenas estilos declarados no CSS para um elemento

Estou querendo/necessitando fazer um conversor de CSS para estilos inline utilizando único e exclusivamente tecnologias client-side.

Pesquisando até encontrei algum coisa, no caso está biblioteca (jquery.inlineStyler) e está implementação, mais não me atende como gostaria, pois ele converte todas as propriedades do style do elemento para style inline (inclusive as default do browser), que não é o que eu gostaria.

O que eu gostaria era que as unicas propriedades CSS convertidas para style inline sejam as declaradas no CSS, e não todas as default do browser para aquele elemento.

Um exemplo simples do resultado que gostaria:

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

Onde o resultado esperado para esse HTML seria:

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