JS4-4-1

by jiaxin520

HTML

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <title> JavaScript Example 4-4</title>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="">
 </head>
 <body>
 <h1 class="title">
  Make me green
</h1>

<p class="para">
  Make me red
</p>
<p class="para">
  Me red too
</p>
<p class="para">
  Also me
</p>
</body>
 <!--引用JS -->
     <script src=""></script>
    <script type="text/javascript" src=""></script>

CSS

*{
    box-sizing: border-box;
}
body{
display:flex;
flex-direction:column;
align-items:center;
border:1px black solid;
margin:40px;
border-radius:10px;
}

JavaScript

document.querySelector('.title').style.color = 'green';

for( let p of document.querySelectorAll('.para') )
{ p.style.color = 'red';
}