我想實現一個文本:突出的JavaScript每次頁面加載
字在線應顯示爲綠色,而字離線應該會出現黃色。每次我的網頁加載。
我做了什麼:我已經搜索了谷歌整天,甚至在stackoverflow。我能找到的只是;
<head>
<style>
.found {
color:red;
}
</style>
</head>
<body>
<input id="s">
<div id="a">
i am online he is offline.
</div>
<script id="jsbin-javascript">
var s = document.getElementById('s');
var div = document.getElementById('a');
function changeNode(n, r, f) {
f=n.childNodes; for(c in f) changeNode(f[c], r);
if (n.data) {
f = document.createElement('span');
f.innerHTML = n.data.replace(r, '<span class=found>$1</span>');
n.parentNode.insertBefore(f, n);
n.parentNode.removeChild(n);
}
}
//s.onkeyup
s.onkeyup = function(){
var spans = document.getElementsByClassName('found');
while (spans.length) {
var p = spans[0].parentNode;
p.innerHTML = p.textContent || p.innerText;
}
if (this.value) changeNode(
div, new RegExp('('+this.value+')','gi')
);
};
</script>
</body>
所以每當我鍵入的東西在輸入框中,成爲字突出。但是,我希望這種情況在沒有螞蟻輸入框的情況下自動發生,並且在綠色和離線狀態下以黃色顯示。
在此先感謝。爲什麼你需要使用Javascript來完成這樣的事情
<html>
<head>
<style>
.green {
color: green;
}
.red {
color: red;
}
</style>
</head>
<body>
<h1 id="colouredText">This is a green text, and here a red text</h1>
<script>
var text = document.getElementById("colouredText");
var words = text.innerHTML.split(" ");
for(var i = 0; i < words.length; i++) {
if(words[i] == "red") {
words[i] = "<span class='red'>" + words[i] + "</span>";
}
if(words[i] == "green") {
words[i] = "<span class='green'>" + words[i] + "</span>";
}
}
text.innerHTML = words.join(" ");
</script>
</body>
爲什麼不把它們包裝在HTML的跨度? – gcampbell
您可以使用javascript onload事件
–在所有誠實的情況下,您目前擁有的解決方案並不適合您想要做的事情。由於@ gcampbell建議將它們分開,因爲元素會更好,並且樣式最好。 –