How to disable all inline styles inside an element

Question

I have a class of span elements in which tinymce-generated texts are embedded.

<span class="ArticleSummary">
This text is generated with a text editor and may have a lot of inline stylings.
</span>

This text is normally full of elements with inline styling. How can I disable all the inline stylings of that text and get pure html of it to be able to style the whole span outside with other css code?

@epascarello I just wanna get pure html and then use some other styling for the whole span which is not affected by inlines. — Stack crawler, Jul 26 '15 at 14:25
So... none of the answers below work? I wonder why mine was downvoted? — webzy, Jul 26 '15 at 14:30
@webzy probably because you used jQuery and there is no reference to jQuery in this. Not everyone uses jQuery. — epascarello, Jul 26 '15 at 14:44

score 3 · Answer 1 · answered Jul 26 '15 at 14:14

3

Loop over all the elements and delete all the style attributes.

var mySpan = document.querySelector('span');

var elements = mySpan.querySelectorAll("*");
for (var i = 0; i < elements.length; i++) {
  elements[i].removeAttribute("style");
}

<span>
  <a href="http://example.com/" style="color: red;">Hello <strong>World</strong></a> — <cite style="text-decoration: overline;">Brian Kernighan</cite>
  </span>

answered Jul 26 '15 at 14:14

Quentin

914,110
126
1,211
1,335

If you assign a class for the span to make that work for only that class of spans, then how would that code change? I'm not very professional in Javascript. – Stack crawler Jul 26 '15 at 14:38
1

@Stackcrawler — This code doesn't do anything with classes, and the question doesn't mention classes at all. – Quentin Jul 26 '15 at 14:40
I'm sorry. I edited the question, now. – Stack crawler Jul 26 '15 at 14:49

How to disable all inline styles inside an element

1 Answers1