為段落中超過 8 個字符的單詞設定背景顏色“黃色”。

我嘗試了下面的 JavaScript 代碼，但它顯示Cannot set properties of undefined (setting 'color')

const a=document.querySelector("p");
a.innerHTML=
a.innerText.split(" ")
.map(
   function(word){
    
    if (word.length>8){
   word.style.color="yellow";
    }
else{
  return word;
}
  }
)

.join(" ");

<h1>Heading</h1>

<!-- this is the paragraph I used-->

<p>Hey, you're not permitted in there. It's restricted. You'll be deactivated for sure.. Don't call me a mindless philosopher, you overweight glob of grease! Now come out before somebody sees you. Secret mission? What plans? What are you talking about? I'm not getting in there! I'm going to regret this. There goes another one. Hold your fire. There are no life forms. It must have been short-circuited. That's funny, the damage doesn't look as bad from out here. Are you sure this things safe?

Close up formation. You'd better let her loose. Almost there! I can't hold them! It's away! It's a hit! Negative. Negative! It didn't go in. It just impacted on the surface. Red Leader, we're right above you. Turn to point... oh-five, we'll cover for you. Stay there... I just lost my starboard engine. Get set to make your attack run.

The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions. Aaah....This is a consular ship. Were on a diplomatic mission. If this is a consular ship...were is the Ambassador? Commander, tear this ship apart until you've found those plans and bring me the Ambassador. I want her alive! There she is! Set for stun! She'll be all right. Inform Lord Vader we have a prisoner.

What a piece of junk. She'll make point five beyond the speed of light. She may not look like much, but she's got it where it counts, kid. I've added some special modifications myself. We're a little rushed, so if you'll hurry aboard we'll get out of here. Hello, sir. Which way? All right, men. Load your weapons! Stop that ship! Blast 'em! Chewie, get us out of here! Oh, my. I'd forgotten how much I hate space travel.

Run, Luke! Run!</p>

uj5u.com熱心網友回復：

我認為你不能為單詞設定樣式，因為單詞在同一個父元素中，你必須為每個單詞設定一個元素，然后你可以設定它們的樣式。

uj5u.com熱心網友回復：

也許我們可以嘗試只修改 innerHTML 并回傳 span 元素。

<script>
    const a=document.querySelector("p");
            const text = a.innerHTML.split(" ").map(function(word) {
                if(word.length > 8) {
                    return `<span style="color: yellow;">${word}</span>`
                } else {
                    return `<span>${word}</span>`
                }
            }).join(" ")
a.innerHTML= text
</script>

uj5u.com熱心網友回復：

簡單的一個（突出顯示所有單詞）

var wordList = document.getElementById('para').innerText.split(" ");

for (let n = 0; n < wordList.length; n  ) {
    wordList[n] = `<span >${wordList[n]}</span>`//set class for words,and make it a span
}
document.getElementById('para').innerHTML=wordList.join(" ");//set back

.word {
  background-color: yellow;
}

<h1>Heading</h1>
<p id='para'>Hey, you're not permitted in there. It's restricted. You'll be deactivated for sure.. Don't call me a mindless philosopher, you overweight glob of grease! Now come out before somebody sees you. Secret mission? What plans? What are you talking about? I'm not getting in there! I'm going to regret this. There goes another one. Hold your fire. There are no life forms. It must have been short-circuited. That's funny, the damage doesn't look as bad from out here. Are you sure this things safe?

Close up formation. You'd better let her loose. Almost there! I can't hold them! It's away! It's a hit! Negative. Negative! It didn't go in. It just impacted on the surface. Red Leader, we're right above you. Turn to point... oh-five, we'll cover for you. Stay there... I just lost my starboard engine. Get set to make your attack run.

The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions. Aaah....This is a consular ship. Were on a diplomatic mission. If this is a consular ship...were is the Ambassador? Commander, tear this ship apart until you've found those plans and bring me the Ambassador. I want her alive! There she is! Set for stun! She'll be all right. Inform Lord Vader we have a prisoner.

What a piece of junk. She'll make point five beyond the speed of light. She may not look like much, but she's got it where it counts, kid. I've added some special modifications myself. We're a little rushed, so if you'll hurry aboard we'll get out of here. Hello, sir. Which way? All right, men. Load your weapons! Stop that ship! Blast 'em! Chewie, get us out of here! Oh, my. I'd forgotten how much I hate space travel.

Run, Luke! Run!</p>

復雜（以特定樣式突出顯示特定單詞）

const SpecialWords = [
  "It's",
  "you"//style word
];
const WordColors = [
  "word",
  "word2"//style class name
];


var wordList = document.getElementById('para').innerText.split(" ");

for (let n = 0; n < SpecialWords.length; n  ) {
    var res = replaceAll(wordList,SpecialWords[n],`<span hljs-subst">${WordColors[n]}">${SpecialWords[n]}</span>`).join(" ");//style adding
}
document.getElementById('para').innerHTML=res;//set back
function replaceAll(array, find, replace) {
var arr = array;
for (let i = 0; i < arr.length; i  ) {
    if (arr[i] == find)
        arr[i] = replace;
}
  return (arr);
}

.word {
  background-color: yellow;
}
.word2 {
  background-color: lightgreen;
}

<h1>Heading</h1>
<p id='para'>Hey, you're not permitted in there. It's restricted. You'll be deactivated for sure.. Don't call me a mindless philosopher, you overweight glob of grease! Now come out before somebody sees you. Secret mission? What plans? What are you talking about? I'm not getting in there! I'm going to regret this. There goes another one. Hold your fire. There are no life forms. It must have been short-circuited. That's funny, the damage doesn't look as bad from out here. Are you sure this things safe?

Close up formation. You'd better let her loose. Almost there! I can't hold them! It's away! It's a hit! Negative. Negative! It didn't go in. It just impacted on the surface. Red Leader, we're right above you. Turn to point... oh-five, we'll cover for you. Stay there... I just lost my starboard engine. Get set to make your attack run.

The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions. Aaah....This is a consular ship. Were on a diplomatic mission. If this is a consular ship...were is the Ambassador? Commander, tear this ship apart until you've found those plans and bring me the Ambassador. I want her alive! There she is! Set for stun! She'll be all right. Inform Lord Vader we have a prisoner.

What a piece of junk. She'll make point five beyond the speed of light. She may not look like much, but she's got it where it counts, kid. I've added some special modifications myself. We're a little rushed, so if you'll hurry aboard we'll get out of here. Hello, sir. Which way? All right, men. Load your weapons! Stop that ship! Blast 'em! Chewie, get us out of here! Oh, my. I'd forgotten how much I hate space travel.

Run, Luke! Run!</p>

我們必須使用 spans（javascript 會將單詞變成 spans）

在此處查看我的答案以供參考

uj5u.com熱心網友回復：

const a=document.querySelector("p");
const words=a.innerHTML.split(" ");
a.innerHTML=words.map((item)=>{
  if(item.length>8) {
    return `<span style="background:yellow">${item}</span>`
  } else {
    return item;
  }
}).join(" ");

uj5u.com熱心網友回復：

代替：

word.style.color="yellow";

嘗試：

    document.getElementById("wordID").style.backgroundColor = 'yellow';

當然給你的 HTML 段落一個名為“wordID”的 id

^ 這是通過 JS 給背景顏色的方式，但除非你真的必須通過 JS 來做，否則我建議只使用簡單的 CSS 樣式來完成作業。

標籤：javascript html css

上一篇：陣列中2個元素的總和-演算法-JavaScript

下一篇：如何檢測String是否包含url并使用javascriptreactjs使url可點擊