Question

我正在学习JavaScript，我正在编写函数来更改每个段落标记的样式和字体样式标记强调（em）和粗体（b）位于 <div> 元素内。这是我的程序。

<div id = "sampDiv2">
<p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing</em> elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, <b>consectetur adipiscing</b> elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
<em>Excepteur sint</em> occaecat cupidatat non proident, <b>sunt in culpa</b> qui 
officia deserunt mollit anim id est laborum.</p>
</div>

<script>
var pElements = document.getElementsByTagName('p');
pElements[1].style.backgroundColor = "#EFDECD";

document.childNodes[1].style.backgroundColor = "#FAEBD7";

var sampDiv2 = document.getElementById('sampDiv2');

sampDiv2.childNodes[0].style.backgroundColor = "#F0FFFF";
</script>

我正在尝试更改div元素中使用的<p>标记的颜色。但是当我运行输出时，控制台说 sampDiv2.childNodes [0] .style未定义

Answer 1

documentation 也包含文字节点，因此最好使用 childNodes 来返回html元素。

＆＃13;

<div id="sampDiv2">
  <p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing</em> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, <b>consectetur adipiscing</b> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    <em>Excepteur sint</em> occaecat cupidatat non proident, <b>sunt in culpa</b> qui officia deserunt mollit anim id est laborum.</p>
</div>

<script>
  var pElements = document.getElementsByTagName('p');
  pElements[1].style.backgroundColor = "#EFDECD";

  document.body.children[1].style.backgroundColor = "#FAEBD7";

  var sampDiv2 = document.getElementById('sampDiv2');

  sampDiv2.children[0].style.backgroundColor = "#F0FFFF";
</script>

＆＃13;

Answer 2

你可以用css做你想做的事。

<style>
p    {background-color:#EFDECD;}
em    {color: red;}
b    {color: darkblue;}
</style>

如果所有<p>元素都具有背景颜色，em元素将为红色，粗体元素将为深蓝色。 Learn more about css了解更多信息。

顺便说一句，上面的代码如果放在html文件中就可以了，但是建议将它放在一个单独的css文件中（删除<style>）并在你的html中使用那个css文件文件。

如果您想轻松选择元素，可以使用jQuery：

执行此操作

//Targets all descendendants of the element with id #sampDiv2 that are 'p' tags
$("#sampDiv2 p").css({"background-color": "#F0FFFF"});

您还可以使用document.querySelectorAll在纯JavaScript中获取这些元素：

//nodes is an array with all the elements in it
var nodes = document.querySelectorAll("#sampDiv2 p");

//To change the first one, but then document.querySelector() would have been enough
nodes[0].style.backgroundColor = "#F0FFFF";

//To change all
for (let node of nodes) {
    node.style.backgroundColor = "#F0FFFF";
}

//Alternative in case above is not yet supported:
nodes.forEach(function(node) {
    node.style.backgroundColor = "#F0FFFF";
});

即便如此，我建议更改元素的css类（包含所有css信息的类），而不是直接编辑样式。

//jQuery way
$("#sampDiv2 p").addClass("abc");

//alternative
for (let node of document.querySelectorAll("#sampDiv2 p")) {
    node.classList.add("abc");
}

在css中：

.abc {
    /* css */
}

或者您可以更改div的类，并在.css中执行：

.myDivClass p {
   /* css for p tags under those div */
}

div元素中的childNode

2 个答案: