Question

基本上，我必须创建一个按钮，单击该按钮时，我需要检索div中的所有段落并突出显示其背景。然后我必须编写相应的JS代码（以不引人注目的方式）将按钮链接到一个函数，该函数在单击时突出显示段落。

按钮应该充当“切换”，也就是说，如果段落已经突出显示，则单击该按钮不会突出显示它们。如果段落未突出显示，则单击按钮会突出显示它们。按钮的文本应该更改以反映这一点，因此它应该说单击以突出显示或单击以取消突出显示。到目前为止，我试图创建一个迭代这些段落的功能，但突出显示不起作用

**我知道html中的mark标签会突出显示文本是否可以将其添加到我的js代码中？ **

HTML：

<!DOCTYPE html>
<html>
<head>
  <script src="task2.js"></script>
  <style>
  #poem {
    padding: 10px;
    margin-bottom: 10px;
    color: blue;
    font-size: 1.25em;
    font-family: sans-serif;
    background-color: silver;
    border: 1px dashed black;
    width: 30%;
  }
  </style>
</head>
<!- Modify code to add a button ->
<body>
<div id="poem">
<h2> How Many, How Much  </h2>
<h4> by Shel Silverstein </h4>
<p> How many slams in an old screen door? </p>
<p> Depends how loud you shut it.</p>
<p> How many slices in a bread?</p>
<p> Depends how thin you cut it.</p>
<p> How much good inside a day? </p>
<p> Depends how good you live 'em. </p>
<p> How much love inside a friend? </p>
<p> Depends how much you give 'em. </p>
</div>
<button id="button"> Click to highlight </button>
</body>
</html>

js code：

function pageLoad() {
    var button = document.getElementById("button");
    button.onclick = okClick;
}

function okClick() {
var allParas = document.getElementsByTagName("p");
for (var i=0; i < allParas.length; i++) {
    if(allParas[i].classList.contains('highlightClass')) {
        allParas[i].classList.remove('highlightClass');
    } else {
        allParas[i].classList.add('highlightClass');
    }
}

}

window.onload = pageLoad;

Answer 1

创建一个新类highlightClass。

if ( allParas[i].classList.contains('highlightClass') ) { 
       allParas[i].classList.remove('highlightClass');
    }else{
       allParas[i].classList.add('highlightClass');
    }

JS DOM - 使用按钮不显眼地突出显示文本

1 个答案: