动态更改特定文本的背景颜色，而不更改其他属性

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  tag that has the class highlight where highlight only changes the background color to yellow.

我已经编写了一个chrome扩展来根据正则表达式查询在页面上查找文本。当文本匹配时,我将匹配的文本包装在具有类突出显示的标记中,其中突出显示仅将背景颜色更改为黄色。

The issue is that sometimes there are already styles applied to  tags in a webpage. For example, the webpage might have this defined:

问题是,有时已经将样式应用于网页中的标记。例如,网页可能已定义:

span {
  font-size: 200%;
}

So when I insert my  tag in another  tag, the font-size is actually 400%.

因此,当我将标记插入另一个标记时,font-size实际上是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?

有没有一种简单的方法可以让我的代码只更改文本的某些属性,比如背景颜色,而不会两次应用网页的样式?

EDIT:

No one really seems to understand what I'm getting at so I'll try to be more clear.

似乎没有人真正了解我所得到的东西所以我会更加清楚。

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.

我正在写一个chrome扩展名。这意味着代码将在其他人的网页上运行。我无法控制他们的风格。我不知道他们是否会使用百分比字体大小或固定值。我不知道他们会改变哪种风格。

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.

除了一个属性外,我根本不想改变他们的风格。如果我将所有内容重置为默认值,那将改变它们的样式。如果我什么都不做,那么它们的样式将被应用两次,如边距,填充,字体大小等。

5 个解决方案

#1

from my comments and @brentonstrine change your tags to:

从我的评论和@brentonstrine将您的标签更改为:

#2

Give your selected span a specific namespaced classname like

为您选择的范围提供特定的命名空间类名称

<span class="gs-text-selected">

or whatever, then write CSS that targets that. You might have to add !important to your styles if you get cascade issues, but be careful with !important.

或者其他什么,然后编写针对它的CSS。如果遇到级联问题,可能必须在样式中添加!important,但要注意!important。

#3

You could specify the text size instead of using a percentage.

您可以指定文本大小而不是使用百分比。

http://jsfiddle.net/jonocairns/3EhZx/1/

span {
    font-size:2rem;
}

#4

Basically, you want a CSS Reset that applies only to span.highlight. Here's one I threw together based on Eric Meyer's popular CSS Reset:

基本上,您需要一个仅适用于span.highlight的CSS重置。这是我基于Eric Meyer流行的CSS重置一起扔的一个:

span.highlight {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  display: inline;
  line-height: 1;
}

Not sure if that covers everything, but it might get most of it. The problem you're going to run into here though is specificity: if there is any CSS that has more specificity, (e.g. it uses an id or it uses more classes than you) then it will be overwritten. Therefore, the best way to do it would be to actually insert the CSS inline directly into each  you create:

不确定是否涵盖了所有内容,但它可能会获得大部分内容。你在这里遇到的问题是特异性:如果有任何CSS具有更多的特异性(例如它使用id或它使用的类比你多),那么它将被覆盖。因此,最好的方法是将CSS内联直接插入到您创建的每个中:

<span class="highlight" style="margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;display:inline;line-height:1;">found word</span>

(BTW, you should use , which semantically denotes highlighted text, instead of . Furthermore, choosing a class name more unique than highlight will help you avoid, to avoid conflicts.)

(顺便说一下,你应该使用,它在语义上表示突出显示的文本,而不是。此外,选择比突出显示更独特的类名将帮助你避免,以避免冲突。)

#5

You can add tag like "" around it and if you like assign a class to it, but you don't need any additional class it will automatically highlight it with yellow background.

您可以在其周围添加“”之类的标签,如果您想为其分配一个类,但是您不需要任何其他类,它将自动以黄色背景突出显示它。

in case you love something fancy

如果你喜欢花哨的东西

mark.heightlight{
  background-color:yellow;
  font-weight:bold;  
}

#1