0

Предистория:
С пользотельской стороны необходимо изменять css элемента в зависимости от того, содержит ли этот самый текст определенный шаблон. Стили меняю через stylish. Уже пытался найти плагин соответствующий, пытался найти в самом css возможности для этого. Но не нашел.

Сейчас думаю о том, что через gracemonkey используя управление dom моделью с помощью javascript - можно изменить/добавить класс/id элемента, что позволит в css добавить необходимые свойства.

Суть вопроса заключается в следующем:
У div'а нет id, есть только class. Выбирая

document.getElementsByClassName("im_message_text")

мы получаем HTML.коллекцию.

Как написать:

если в теле элемента коллекции содержится паттерн А - то изменить класс элемента на Х

?

Заранее благодарен за советы :)

ЗЫ. Выбирая теги увидел css selectors, бегло просмотрел статью на w3schools на эту тему. Ничего не нашел. Посмотрю внимательнее, но если кто знает как с их помощью решить вопросы - был бы весьма признателен!

UPD:
Я нашел ответ для jQuery. Он мне не совсем подходит, так как хочу простой JavaScript. Для моего случая выглядит так:

$('.im_message_text:contains("PROBLEM")').css("color", "red");

Так же в css selectors старых нашел упоминание о :contains. Куда его убрали, и зачем?

Сейчас есть Element[attr*="text"]. Но текст внутри div'а это не атрибут. А это было бы самым крутым решением этого вопроса.

2
  • что мешает пробежаться по полученной коллекции и проверить нужный текст?
    – Grundy
    27 апр 2016 в 3:55
  • @Grundy , если честно - то незнание как. Можете подсказать? В jQuery я так понимаю именно это и сделано, в качестве обертки. Но я пока не нашел как.
    – Crystal
    27 апр 2016 в 4:32

1 ответ 1

1

Так как возвращается несколько элементов, то для проверки каждого нужно просто пробежаться по ним. Сделать это можно несколькими способами, например

Обычный цикл

var elements = document.querySelectorAll(".im_message_text"); //либо document.getElementsByClassName

for(var i=0; i<elements.length; i++){
    var element = elements[i];
    if(element.innerHTML.indexOf('PROBLEM')>-1){//можно так же проверять innerText, textContent
        element.classList.remove('im_message_text');
        element.classList.add('new-class');
    }
}

Либо то же самое с помощью функции forEach

[].forEach.call(document.querySelectorAll(".im_message_text"),function(element){
    if(element.innerHTML.indexOf('PROBLEM')>-1){//можно так же проверять innerText, textContent
        element.classList.remove('im_message_text');
        element.classList.add('new-class');
    }
});
2
  • Спасибо. Правда если кто-то даст ответ как это сделать средствами css - уж не серчайте, я буду вынужден поменять "правильный ответ" :)
    – Crystal
    27 апр 2016 в 5:10
  • @Crystal, на данный момент - никак.
    – Grundy
    27 апр 2016 в 6:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.