Как изменить цвет строки на странице HTML с помощью Javascript

У меня есть HTML-страница, и я хочу выделить слово OK/Ошибка в зеленом/красном
Возможно ли это «на лету» с помощью простого javascript sniplet, например Поиск & Заменить?Как изменить цвет строки на странице HTML с помощью Javascript

Мой образец:

<html> 
    <head> 
     <title></title> 

    </head> 
    <body> 
    OK - Test1 Passed!<br> 
    OK - Test2 Passed!<br> 
    Error - Test3 Failed <br> 

    Some More Text... 
    </body> 

</html>

Это не работает, но я думал, что-то вроде:

<script type="text/javascript"> 
document.write(document.body.replace("OK", "<font style= background-color:green>OK</font>"); 
</script>

должны сделать магию.

Все примеры выделения или раскраски, которые я нашел, были слишком сложными. Надеюсь, вы решите мою проблему простым способом.

источник

2012-01-25 icnivad

С чем именно вы столкнулись? Замена текста на JavaScript или загрузка содержимого 'body'? –

Я просто хочу иметь строку ОК с зеленым фоном и ошибкой красного цвета. Снайпер Javascript, вероятно, является полным неправильным подходом – icnivad

Из приведенных ниже ответов я понимаю, что моя быстрая мысль о том, что это тривиально, неверна. Я также доказал, что у меня очень мало опыта работы с html :-) Моя тестовая страница никогда не была предназначена для запуска на веб-сервере, поэтому функция замены будет в порядке, но я лучше сделаю это правильно. Использование span с классами. Спасибо! – icnivad

Вы пропустили закрывающую скобку здесь:

document.write(document.body.replace("OK", "<font style= background-color:green>OK</font>"));

Кроме того, тег шрифта амортизируется, и вы должны заключить значение атрибута стиля в кавычки:

document.write(document.body.replace('OK', '<span style="background-color:green">OK</span>'));

источник

2012-01-25 17:38:03 c24w

font элемент является устаревшим для года. Вместо этого используйте span.

Текст можно поместить в элемент span и изменить его стиль позже для каждого JavaScript.

<span id="label1">OK</span>

Я рекомендую использовать jQuery, потому что он делает большую работу для вас. Например, установка CSS свойства элементов является простым, как это:

$("#label1").css("background-color", "red");

Конечно, этот код должен быть либо положить внутрь script тегов или в .js файл, который включается на этой странице.

источник

2012-01-25 17:38:33 migu

Если вы хотите сделать это, эффективно, вы захотите выделить выделенный текст внутри элементов. Это даст вам доступ к этим словам через DOM в простой манере.

Возьмите это, например:

<html> 
    <head> 
     <title></title> 

    </head> 
    <body> 
    <p id="test1"><span class="status">OK</span> - Test1 <span class="result">Passed!</span></p> 
    <p id="test2"><span class="status">OK</span> - Test2 <span class="result">Passed!</span></p> 
    <p id="test3"><span class="status">Error</span> - Test3 <span class="result">Failed</span></p> 

    Some More Text... 
     <script type="text/javascript"> 
      var test1Status = document.getElementById('test1').firstChild; 
      var test1Result = document.getElementById('test1').lastChild; 

      test1Status.style.color = 'green'; 
      test1Result.innerHTML = "Passsssed"; 

     </script> 
    </body> 
</html>

Это дает вам доступ к как статус теста («OK» или «Error»), цвет его, и ответ на статус («Пропущено» или «Сбой»). Очевидно, что вы не захотите жестко кодировать идентификаторы в JavaScript, но лучше передать идентификатор с помощью функции.

Однако это должно помочь вам понять, почему вы хотите работать с элементами DOM таким образом. У вас больше контроля, и ваш скрипт намного более гибкий.

источник

2012-01-25 17:47:46 Tim

Document.body.replace - тяжелая функция. Вместо этого вы должны использовать метки.

<html> 
<head> 
    <title></title> 

</head> 
<style> 
    .passed{background-color:green} 
</style> 
<body> 
<span class="passed">OK</span> - Test1 Passed!<br> 
<span class="passed">OK</span> - Test2 Passed! <br> 
Error - Test3 Failed <br> 

Some More Text... 
</body> 
</html>

Или добавить класс через js. Это будет гораздо более эффективный способ сделать это.

источник

2012-01-25 17:55:24 emphaticsunshine

Relized я должен работать с диапазоном в html, чем создавать сложные обертки вокруг;) – icnivad

Да, это лучшая практика для решения таких проблем. – emphaticsunshine

Вот основной JavaScript, который будет делать, как вы спросите:

var body = document.getElementsByTagName('body')[0].innerHTML; 
body = body.replace(/OK/g, "<span style=\"color: red; background-color:green\">OK</span>") 
document.getElementsByTagName('body')[0].innerHTML = body;

jsFiddle пример

источник

2012-01-25 17:56:18 j08691

Это мое решение. Нажмите кнопку :)

<html> 
<head> 
<title></title> 
<script type="text/javascript"> 
    function replaceAll(txt, replace, with_this) { 
     return txt.replace(new RegExp(replace, 'g'), with_this); 
    } 
</script> 
</head> 
<body> 
    OK - Test1 Passed! 
    <br> OK - Test2 Passed! 
    <br> Error - Test3 Failed 
    <br> Some More Text... 

    <input type=button 
     onclick='document.body.innerHTML = replaceAll(document.body.innerText,"OK","ro.demostene :)")' 
     name="Click" /> 

</body> 

</html>

источник

2012-01-25 18:02:21 panagdu

Как изменить цвет строки на странице HTML с помощью Javascript

ответ

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