如何將顏色更改爲div內的html字

-2

我需要更改div中的單詞顏色。它充滿了dinamically，有一個JavaScript函數讀取數據庫並寫入我的div的ID。我試圖色字INFO（僅INFO），都沒有成功：如何將顏色更改爲div內的html字

$("div:contains('INFO')").each(function() { 
 
    $(this).html($(this).html().replace("INFO", "<span class='green'>INFO</span>")); 
 
}); 
 

 

 
/* THis is only an example*/ 
 

 
document.getElementById('textLog').innerHTML ="Load[DB]: INFO";

.green { 
 
\t color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div class="menuLog"> 
 
\t \t <div class="log"> 
 
\t \t \t <h3 class="textStyle">Log</h3> 
 
\t \t \t <div id="textLog" class="silverStyle" name="textLog" required></div><br> 
 
\t \t </div> 
 
\t </div>

來源

2017-09-04 Frank Pentangeli

-2

我所有的幫助閱讀，但任何人都沒有滿足我的問題，有人去附近解決這個問題，但問題是始終不變的，你的例子有色只有一個字，所以我改變該法規實施細則：

$('#textLog').html('INFO start <br> INFO loadDB <br> WARN connection <br> ERROR DB not exist'); 
 
changeColor(); 
 

 

 
function changeColor() { 
 
\t $('div:contains("INFO")').html(function() { 
 
\t  return $(this).html().replace(/INFO/g, "<span  style='color:green'>INFO</span>"); 
 
\t }); 
 
    \t $('div:contains("WARN")').html(function() { 
 
\t  return $(this).html().replace(/WARN/g, "<span  style='color:orange'>WARN</span>"); 
 
\t }); 
 
    \t $('div:contains("ERROR")').html(function() { 
 
\t  return $(this).html().replace(/ERROR/g, "<b><span  style='color:red'>ERROR</span></b>"); 
 
\t }); 
 
    
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="textLog" class="silverStyle" name="textLog" required></div><br>

來源

2017-09-05 13:04:00

這是否解決了您的問題？ –

是的，我解決了它 –

這看起來幾乎與以前的答案相同，但如果它解決了你的問題，你應該選擇它 –

試試這個。

function changeColor() { 
 
    $("span:contains('Info')").css("color", "green"); 
 
} 
 

 
document.getElementById('textLog').innerHTML = "<span>Info<span>"; 
 
document.getElementById('textLog1').innerHTML = "<span>Info<span>"; 
 
document.getElementById('textLog2').innerHTML = "<span>Info<span>"; 
 

 
//This part emulates the data loading 
 
//setTimeout(function(){ 
 
// console.log('Data populated....'); 
 
// //when finished you must call the function 
 
// changeColor(); 
 
//; }, 500); 
 

 
changeColor();

.green { 
 
\t color: green; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>contains demo</title> 
 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
</head> 
 
<body> 
 

 
<div id="textLog" class="silverStyle" name="textLog" required></div> 
 
<div>TEST</div> 
 
<div id="textLog1" class="silverStyle" name="textLog" required></div> 
 
<div id="textLog2" class="silverStyle" name="textLog" required></div> 
 

 
</body> 
 
</html>

你需要調用changeColor（）方法來改變顏色，這樣做時，函數填補信息完成。

來源

2017-09-04 15:03:43

這一種顏色只有第一項......不是所有的 –

@FrankPentangeli解決了！ –

這種顏色所有的行，我要求顏色（讀取標題）的單詞，只有這個詞 –

你可以抓住包含所需的文本元素，因爲你已經嘗試做的，然後使用HTML替換剛剛字INFO：

$('div:contains("INFO")').html(function() { 
    return $(this).html().replace(/INFO/g, "<span style='color: green'>INFO</span>"); 
});

基於所有額外要求更新小提琴發現在註釋：https://jsfiddle.net/bL24mw97/

來源

2017-09-04 15:07:22 DimitrisCSD

所以這個函數只有當一個div包含單詞....例如：

INFO

，而在我的情況下，這些單詞是'注入'javscript，所以不會運行這種方式 –

我不確定我是否明白你想要什麼，但我已經更新了我的答案。看一看。它只會改變你想成爲綠色的詞 – DimitrisCSD

你不能爲一個簡單的單詞着色，你必須把它放在類似於我在示例中放置的範圍內，也許你需要閱讀一些關於HTML和CSS作品的內容。 –

回答

相關問題