Dynamically changing background color of specific text without changing other attributes
- by gsingh2011
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 <span> tag that has the class highlight where highlight only changes the background color to yellow.
The issue is that sometimes there are already styles applied to <span> tags in a webpage. For example, the webpage might have this defined:
span {
font-size: 200%;
}
So when I insert my <span> tag in another <span> tag, the font-size is actually 400%.
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?
