StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODynamically changing background color of specific text without changing other attributes
text
Body
copied!<p>I've written a chrome extension to find text on a page based on a regex query. When text is matched, I wrap the matched text in a <code><span></code> tag that has the class <code>highlight</code> where <code>highlight</code> only changes the background color to yellow.</p> <p>The issue is that sometimes there are already styles applied to <code><span></code> tags in a webpage. For example, the webpage might have this defined:</p> <pre><code>span { font-size: 200%; } </code></pre> <p>So when I insert my <code><span></code> tag in another <code><span></code> tag, the font-size is actually 400%.</p> <p>Is there an easy way for my code to just change certain properties of the text, like the background color, without applying the webpage's styles twice?</p> <p>EDIT:</p> <p>No one really seems to understand what I'm getting at so I'll try to be more clear.</p> <p>I'm writing a chrome extension. That means the code will run on someone else's webpage. I have no control over their styles. I don't know whether they'll be using percentages for font sizes or fixed values. I don't know which styles they will change.</p> <p>I don't want to change their styles at all, except for one property. If I reset everything to the default values, that would be changing their styles. If I do nothing, than their styles will be applied twice, like margin, padding, font-size, etc.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload