📃노마드코더 Vanilla JS 메모1

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Momentum</title>
</head>
<body>
    <div class="hello">
        <h1>Grab me1</h1>
    </div>
    <div class="hello">
        <h1>Click me!</h1>
    </div>
    <div class="hello">
        <h1>Grab me3</h1>
    </div>
    
    <script src="app.js"></script>
</body>
</html>

CSS

@charset "UTF-8";

body{
    background-color: beige;
}

JS

const a = document.querySelector(".hello:nth-child(2)")
console.log(a.innerText);

function click(){
    a.style.color = "blue";
}

function over(){
    a.style.color = "red";
}

function title(){
    console.log("title was clicked!");
}

a.addEventListener("mouseover", click);
a.addEventListener("mouseout", over);
a.addEventListener("click", title);

Author And Source

이 문제에 관하여(📃노마드코더 Vanilla JS 메모1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@csea9000/노마드코더-Vanilla-JS-메모

저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다