使用javascript高亮显示文本不起作用_Javascript

使用javascript高亮显示文本不起作用

javascript

使用javascript高亮显示文本不起作用,javascript,Javascript,我想突出显示或更改所有p元素的背景色为黄色，但它不会工作我还希望我的按钮是一个切换，以突出显示和突出显示段落元素。可能吗？谢谢你的帮助 <html> <head> <script type="text/javascript" src="task2.js"></script> <style> #poem { padding: 10px; margin-bottom: 10px; color: blu

我想突出显示或更改所有p元素的背景色为黄色，但它不会工作

我还希望我的按钮是一个切换，以突出显示和突出显示段落元素。可能吗？谢谢你的帮助

 <html>
<head>
  <script type="text/javascript" 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>
<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="yellow">Click to Highlight </button>
</body>
</html>

这应该行得通

<script type="text/javascript">
    document.getElementById('some_id').onclick= function() {
        var p = this.parentNode.style;
        p.color = yellow;
    };
</script>


document.getElementById（'some_id'）。onclick=function（）{
var p=this.parentNode.style；
p、 颜色=黄色；
};

编辑：切换按钮

<script type="text/javascript">
        document.getElementById('some_id').onclick= function() {
            var p = this.parentNode.style;
            if (p.color = yellow) p.color = white;
            else p.color = yellow;
        };
    </script>


document.getElementById（'some_id'）。onclick=function（）{
var p=this.parentNode.style；
如果（p.color=黄色）p.color=白色；
否则p.颜色=黄色；
};

您可以使用

querySelector

和

querySelectorAll

。我已经附加了一个JSFIDLE来查看，它有两个选项——一个是迭代段落

var paragraph = document.querySelectorAll("p");
    paragraph.forEach(p => {
      p.style.color ="yellow";
    });

第二个选项只是将css类添加到父类（#poem）中，显然是首选方法

var poem = document.querySelector('#poem');
    poem.classList.add('yellow'); // and of course you need to define the `.yellow {color: yellow;}` in your css.

希望这有帮助。

试试这个：

document.getElementById("yellow").addEventListener("click", myFunction);

function myFunction() {
    var x = document.getElementById("poem");
    if (x.style.color == "blue") {
        x.style.color == "yellow";
    } else if (x.style.color == "yellow") {
        x.style.color == "blue";
    }
}

我不明白你为什么不调用onClick函数。这就解决了这个问题。我首先需要一个不引人注目的javascript样式，它是

文档。getElementsByTagName

其次，

段落

是一个

数组。你需要通过循环元素来设置样式颜色。你能教我怎么做吗？这对外部javascript也有效吗？我需要做一件不引人注目的事style@KenmourNoble是的，就像第二个一样，我喜欢用按钮把我所有的段落都换成黄色，对吗？我想使用相同的按钮撤消颜色更改，这样它就像一个突出显示和取消突出显示的切换。您的段落是否有id？它应该是这样的document.getElementById（'colorpaga'）。onclick…我不能只使用getElementsbyTagName，这样就不必在它们上使用id了吗？也许我很笨，但当我把它放在外部js文件上时，它就不起作用了。它在jsfiddle上工作得非常好though@KenmourNoble尝试将外部js文件放在HTML的末尾，就在关闭
bodytag之前。这两个都不适合我。我正在尝试一种新方法，其中我使用getElementsbyTagName并将其放在一个循环中，以使所有段落行变为黄色，但它也不起作用
document.getElementById("yellow").addEventListener("click", myFunction);

function myFunction() {
    var x = document.getElementById("poem");
    if (x.style.color == "blue") {
        x.style.color == "yellow";
    } else if (x.style.color == "yellow") {
        x.style.color == "blue";
    }
}