Jam's story

[JS] 클래스 추가하기 본문

WEB/JavaScript

[JS] 클래스 추가하기

애플쩀 2022. 5. 29. 15:30
classList.add("클래스명");
className("클래스명");
setAttribute("class","클래스명");
innerText로 텍스트를 추가하기 
+= 를 사용할 수 있고 =를 사용하면 그것으로 최종마무리된다. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=~, initial-scale=1.0">
    <title>Document</title>
    <style>
        #txtMsg{
            border: 1px solid pink;
            padding: 5px;
            width: 400px;
        }
    </style>
</head>
<body>
    <h3>e1연습</h3>
    <input type="text" id="txtMsg" name="txtMsg" autofocus="autofocus">
    <button onclick="btn_click()">완료</button>
    <p id="demo"></p>
    <script>
        var h3elemt=document.querySelector("h3");
        h3elemt.innerText+=" 이렇게";
        h3elemt.innerText+=" 여기에 추가를 할게요";
       //document.getElementById("txtMsg").classList.add("clstxt");
     //  document.getElementById("txtMsg").className("clstxt");
       document.getElementById("txtMsg").setAttribute("class","clstxt"); 
       function btn_click(){
           var message=document.getElementById("txtMsg").value;
            // var message=document.getElementsByClassName("clstxt").value;
            
              var pdemo=document.getElementById("demo");
            pdemo.innerText=message;
        }
    </script>
</body>
</html>
Document

e1연습

저작자표시 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JS] 자바스크립트의 기본적인 문법  (0) 2022.05.30
[JS] day2- 시험  (0) 2022.05.30
[JS] select  (0) 2022.05.27
[Js] 스타일변경  (0) 2022.05.27
[JS] 라디오버튼  (0) 2022.05.27
'WEB/JavaScript' Related Articles more
Comments