정구리의 우주정복

[Javascript] 버튼 클릭 시 글자 색 변하게 하기 본문

STUDY/K-DIGITAL

[Javascript] 버튼 클릭 시 글자 색 변하게 하기

Jungry_ 2022. 9. 4. 22:04
반응형

 

 

<!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">
    <title>Document</title>
    <style>
        .done{
            color : red;
        }
    </style>
</head>
<body>
    <h1 id="item">Hello World</h1>
    <p>Great Javascript</p>
    <button id="btn">Try it ! </button>

    <script>
        const item = document.getElementById('item');
        const btn = document.getElementById('btn');

        btn.onclick = function(){

            item.setAttribute('class','done');
        }
    </script>
</body>
</html>

style 태그 안에 

미리 글자색을 바꿔주는 태그를 하나 만들어놓는다 여기서는 class 명이 done 일때 실행되도록 만들어줬다 

 

그리고 버튼을 클릭했는데 태그에 class 명을 추가해주면 된덩 ! 그럼 글자 색이 바뀐다 

반응형

'STUDY > K-DIGITAL' 카테고리의 다른 글

[Javascript] mouse hover 시 글씨 나오게 하기 !!  (0) 2022.09.04
[Javascript] to-do list 만들기  (0) 2022.09.04
[Javascript] button onclick 사용하기  (0) 2022.09.04
[JavaScript] Javascript 로 todo 의 input 구현 html 에 요소 추가  (0) 2022.09.04
[HTML/CSS] 네이버 회원가입 폼 만들기  (0) 2022.08.29
'STUDY/K-DIGITAL' Related Articles more
Comments