Добавить стиль css для определенного текста с помощью jquery

Я хочу добавить цвет к слову «тексты» без использования каких-либо меток, таких как span, чтобы заключить его. Заранее спасибо.

источник

2015-03-03 wj R.

Это невозможно без обертывания определенного текста/символов. Но тогда почему бы не обернуть его? –

Для людей, голосовавших, я думаю, что его очевидный этот пользователь является новым. Если вы проголосуете, вы, как правило, пытаетесь объяснить, что пользователь сделал не так, или ссылку на какую-то помощь: http://stackoverflow.com/help/how-to-ask – wrxsti

Не могли бы вы объяснить * почему * вы не хотите, чтобы заключить слова, которые вы хотите выделить? – aaronk6

Вы не можете сделать это без упаковки текст к элементу. Но вы можете сделать обертывание с JQuery:

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

http://jsfiddle.net/r36xjzs7/

Это обновит весь элемент, хотя, так что это не так эффективно.

источник

2015-03-03 19:06:06 balzafin

спасибо, можно ли указать более одного слова? –

Да, с простой петлей, например. http://jsfiddle.net/r36xjzs7/2/ – balzafin

-1

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

источник

2015-03-03 18:50:10 pBuch

Это применимо ко всему тексту, а не только к определенному слову –

Я лично буду обертывать слова в пределах элемента span.

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

Тогда вы можете позвонить

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

источник

2015-03-03 18:56:17 CaptainOfTheSky

Да, это было бы легко, но не нужно было использовать jquery для этого ... –

Вы можете использовать следующую функцию стилизовать любое слово в тексте:

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>")); 
    }

Просто целевого элемент, который содержит текст, выбирая слова для стиля и CSS укладки выбора.

Ниже приведен пример :

<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>

Использование:

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

Результаты:

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

Он также поддерживает прохождение несколько стилей в одном вызове:

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

источник

2018-03-01 01:45:15 Cybernetic

Ну, вы не можете.

Но это хороший вопрос: aaronk6 спросил, почему бы вам не обернуть слово в пролете, и причина заключается в том, что CSS является инструментом для разделения контента и внешнего вида, так что это точно, для чего его следует использовать. Кроме того, вы можете оказаться в ситуации, когда вы можете редактировать CSS, но не имеете доступа к html.

There's a great article by Chris Coyier по этой проблеме, призывая к некоторым дополнительным селекторам CSS, которые пригодились бы для этого.

Это, как говорится, решение от Cybernetic отлично (kudos)! Если вы хотите внести такие изменения в файл и не можете (или не будете) касаться 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); 
    }

Так что, если вы хотите изменить только "бар" в <p>foo bar</p>, вы бы назвали:

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

А затем добавить правило CSS:

.style-bar{ 
    color: #123; 
}

PS .: Извините, это не комментарий к публикации в Cybernetic ... Мне еще не разрешено комментировать.

источник

2018-03-04 05:29:43

Добавить стиль css для определенного текста с помощью jquery

ответ

Смежные вопросы