使用jquery将css样式添加到特定文本

How to add style to a particular text or characters within a div?

如何为div中的特定文本或字符添加样式?

<div class="test">blocks of texts here.</div>

I want to add color to the word "texts" without using any tags such as span to enclose it. Thanks in advance.

我想为“文本”这个词添加颜色,而不使用任何标记,例如span来封闭它。提前致谢。

5 个解决方案

#1

You can't do that without wrapping the text to an element. But you can do the wrapping with jQuery:

如果不将文本包装到元素,则无法执行此操作。但你可以使用jQuery进行包装:

var $test = $('.test').html();
$test = $test.replace(/texts/gi, '<span class="tomato">texts</span>');
$('.test').html($test);

http://jsfiddle.net/r36xjzs7/

This will recreate the whole element though, so it's not that efficient.

这将重新创建整个元素,因此效率不高。

#2

You can use the following function to style any word in text:

您可以使用以下函数设置文本中任何单词的样式:

function style_word(text_id, word, css_style) {
    html = $('#' + text_id).html();
    replace = word;
    re = new RegExp(replace,"gi");
    $('#' + text_id).html(html.replace(re, "<span style='" + css_style + "'>" + word + "</span>"));
    }

Simply target the element that contains the text, choosing the word to style and the css styling of choice.

只需定位包含文本的元素,选择要设置样式的单词和选择的css样式。

Here is an example:

这是一个例子:

<div id='my_words'>
There is little doubt that stack overflow has become the de facto method of building software. There is no other way to ensure we are not reinventing the wheel, and benefiting from the power of massive collaboration and variation. A network of contributing individuals will always produce the most optimal solution, and this cannot be matched by the singular efforts of an individual.
</div>

Usage:

style_word('my_words', 'software', 'color: hotpink')

Results:

style_word('my_words', 'software', 'font-style: italic')

It also supports passing multiple styles in one call:

它还支持在一个调用中传递多个样式:

style_word('my_words', 'software', 'font-size: 24px; color: blue; font-weight: bold; font-style: italic')

#3

I personally would wrap the words within a span element.

我个人会将这些单词包装在span元素中。

<div class="test">blocks of <span id="blueText">texts</span> here.</div>

Then you can call

然后你可以打电话

$("#blueText").css('color', 'blue');

#4

Well, you can't.

好吧,你不能。

But it is a good question: aaronk6 asked why wouldn't you wrap the word in a span, and the reason is that CSS is a tool to separate content and appearance, so this is precisely what it should be used for. Also, you might find yourself in a situation where you can edit the CSS but has no access to the html.

但这是一个很好的问题:aaronk6问你为什么不在一个范围内包装这个词,原因是CSS是一个分离内容和外观的工具,所以这正是它应该被用来的东西。此外,您可能会发现自己可以编辑CSS但无法访问html。

There's a great article by Chris Coyier on this issue, calling for some extra CSS selectors that would come in handy for that.

Chris Coyier在这个问题上发表了一篇很棒的文章,要求一些额外的CSS选择器可以派上用场。

That being said, the solution by Cybernetic is great (kudos)! If you are to make such alterations in the file, and can't (or won't) touch the html, javascript is the way to go. But instead of hardcoding the CSS rules, I propose you just give it a span with a class, and make the rules in your external CSS file. The code would go:

话虽这么说,控制论的解决方案很棒(荣誉)!如果你要在文件中进行这样的改动,并且不能(或不会)触摸html,javascript就是要走的路。但是我没有硬编码CSS规则,而是建议你给它一个类的跨度,并在外部CSS文件中制定规则。代码将:

function style_word(text_element, word_to_style) {
    html = text_element.html();
    classID = "style-"+word_to_style;
    re = new RegExp(word_to_style,"gi");
    new_html = html.replace(re, "<span class='"+classID+"'>"+word_to_style+"</span>");
    text_element.html(new_html);
    }

So, if you wanted to change only "bar" in <p>foo bar</p>, you'd call:

所以,如果你只想改变

foo bar 中的“bar”,你会打电话:

style_word( $("p"), "bar" ); //jQuery element, then word inside

And then add a CSS rule:

然后添加一个CSS规则:

.style-bar{
    color: #123;
}

PS.: Sorry this is not a comment on Cybernetic post... I'm not allowed to comment yet.

PS。:对不起,这不是对Cybernetic帖子的评论......我还不能发表评论。

#5

-1

$(".test").css("color","white");

#1