首頁猿問使用 javascript...

使用 javascript 循環(huán)更改單詞最后一個字符的顏色

JavaScript

ITMISS 2021-12-12 17:53:18

我想知道如何<p>使用 Javascript 循環(huán)更改標簽中單詞最后一個字符的顏色。在下面的示例中，我想更改單詞“John”中的“n”、“Jacques”中的“s”、“Peter”中的“r”等的顏色。<section> <h1>Name</h1> <p>John</p> <p>Jacques</p> <p>Peter</p> <p>Robert</p></section>

查看完整描述

3 回答

隔江千里

TA貢獻1906條經驗獲得超10個贊

你可以做：

document

.querySelectorAll('#pColors p')

.forEach(p => {

const len = p.innerText.length - 1

p.innerHTML = `${p.innerText.slice(0, len)} <span class="red">${p.innerText[len]}</span>`

})

.red { color: red; }

<p>Jacques</p>

<p>Peter</p>

<p>Robert</p>

</section>

反對回復 2021-12-12

侃侃爾雅

TA貢獻1801條經驗獲得超16個贊

這樣的事情應該工作：

document.querySelectorAll('p').forEach(el => {

const prefix = el.innerText.substr(0, el.innerText.length - 1);

const suffix = el.innerText.substr(el.innerText.length - 1);

el.innerHTML = `${prefix}<span class="colored">${suffix}</span>`;

})

使用document.querySelectorAll我們選擇<p>頁面上的所有標簽。然后我們循環(huán)NodeList使用 using NodeList#forEach。對于每次迭代，我們挑選出除最后一個字符之外的所有字符，然后挑選出最后一個字符。最后，我們innerHTML使用模板字符串重構元素的內容，并將單個字符包裝在<span>.

此代碼假設您的 CSS 如下所示：

.colored {

color: red;

}

document.querySelectorAll('p').forEach(el => {

const prefix = el.innerText.substr(0, el.innerText.length - 1);

const suffix = el.innerText.substr(el.innerText.length - 1);

el.innerHTML = `${prefix}<span class="colored">${suffix}</span>`;

})

.colored {

color: red;

}

<p>Jacques</p>

<p>Peter</p>

<p>Robert</p>

</section>

反對回復 2021-12-12

一只名叫tom的貓

TA貢獻1906條經驗獲得超3個贊

let list = ['John', 'Jacques', 'Peter', 'Robert'];

for (let i = 0; i < list.length; i++) {

let name = list[i];

document.getElementById("list-container").innerHTML += `<p> ${name.substr(0, name.length - 1)}<span style="color: red">${name.charAt(name.length - 1)}<span><p>`

}

反對回復 2021-12-12