avaScript 系列四：第4課

─-不使用jQuery

by applelily

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列四：第4課 ─-不使用jQuery</title>
    <link rel="stylesheet" href="./04_js_jquery.css">
</head>
<body>
  <h1>
  不使用jQuery
  </h1>
    <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>
    <script src="./04_js_jquery_no.js"></script>
</body>
</html>

CSS

.color1{
    color:green;
}

.color2{
    color:red;
}

JavaScript

var elem_title = document.querySelectorAll('.title');
elem_title.forEach(function(elemTitle) {   
    elemTitle.classList.add('color1');
})

var elem_para = document.querySelectorAll('.para');

elem_para.forEach(function(elemPara) {   
    elemPara.classList.add('color2');
})