CodeGym /행동 /Frontend SELF KO /속성과 스타일 작업

속성과 스타일 작업

Frontend SELF KO

레벨 41 , 레슨 3

사용 가능

4.1 속성 조작

DOM 요소의 속성과 스타일을 조작하는 것은 웹 문서 작업의 중요한 부분이야. 이걸 통해 사용자 행동이나 다른 조건에 따라 요소의 외관과 행동을 변경할 수 있어.

1. 속성 얻기

요소의 속성 값을 얻으려면 getAttribute() 메소드를 사용해.

예:

HTML

    
      <!DOCTYPE html>
      <html>
        <head>
          <title>Document</title>
        </head>
        <body>
          <a href="https://example.com" id="myLink">Visit Example.com</a>

          <script>
            const link = document.getElementById('myLink');
            const href = link.getAttribute('href');
            console.log(href); // 출력: https://example.com
          </script>
        </body>
      </html>

2. 속성 설정

속성의 값을 설정하거나 변경하려면 setAttribute() 메소드를 사용해.

예:

HTML

    
      <!DOCTYPE html>
      <html>
        <head>
          <title>Document</title>
        </head>
        <body>
          <a href="https://example.com" id="myLink">Visit Example.com</a>

          <script>
            const link = document.getElementById('myLink');
            link.setAttribute('href', 'https://newexample.com');
            console.log(link.getAttribute('href')); // 출력: https://newexample.com
          </script>
        </body>
      </html>

3. 속성 삭제

속성을 삭제하려면 removeAttribute() 메소드를 사용해.

예:

HTML

    
      <!DOCTYPE html>
      <html>
        <head>
          <title>Document</title>
        </head>
        <body>
          <a href="https://example.com" id="myLink" target="_blank">Visit Example.com</a>

          <script>
            const link = document.getElementById('myLink');
            link.removeAttribute('target');
            console.log(link.getAttribute('target')); // 출력: null
          </script>
        </body>
      </html>

4. 속성 존재 여부 확인

속성의 존재 여부를 확인하려면 hasAttribute() 메소드를 사용해.

예:

HTML

    
      <!DOCTYPE html>
      <html>
        <head>
          <title>Document</title>
        </head>
        <body>
          <a href="https://example.com" id="myLink" target="_blank">Visit Example.com</a>

          <script>
            const link = document.getElementById('myLink');
            console.log(link.hasAttribute('target')); // 출력: true
            link.removeAttribute('target');
            console.log(link.hasAttribute('target')); // 출력: false
          </script>
        </body>
      </html>

4.2 클래스 조작

1. 클래스 추가

요소에 클래스를 추가하려면 classList.add() 메소드를 사용해.

예:

HTML

    
      <!DOCTYPE html>
      <html>
        <head>
          <title>Document</title>
          <style>
            .highlight {
              background-color: yellow;
            }
          </style>
        </head>
        <body>
          <p id="myParagraph">This is a paragraph.</p>

          <script>
            const paragraph = document.getElementById('myParagraph');
            paragraph.classList.add('highlight');
          </script>
        </body>
      </html>

2. 클래스 삭제

요소에서 클래스를 삭제하려면 classList.remove() 메소드를 사용해.

예:

HTML

    
      <!DOCTYPE html>
      <html>
        <head>
          <title>Document</title>
          <style>
            .highlight {
              background-color: yellow;
            }
          </style>
        </head>
        <body>
          <p id="myParagraph" class="highlight">This is a paragraph.</p>

          <script>
            const paragraph = document.getElementById('myParagraph');
            paragraph.classList.remove('highlight');
          </script>
        </body>
      </html>

3. 클래스 토글

클래스를 토글하려면 classList.toggle() 메소드를 사용해. 클래스가 없다면 추가하고, 있으면 삭제해줘.

예:

HTML

    
      <!DOCTYPE html>
      <html>
        <head>
          <title>Document</title>
          <style>
            .highlight {
              background-color: yellow;
            }
          </style>
        </head>
        <body>
          <button type="button" id="myButton">Click me!</button>

          <script>
            const btn = document.getElementById('myButton');
            btn.addEventListener("click", () => {
              btn.classList.toggle('highlight'); // 클래스를 추가. 다시 누르면 클래스를 삭제.
            });
          </script>
        </body>
      </html>

4. 클래스 존재 여부 확인

클래스의 존재 여부를 확인하려면 classList.contains() 메소드를 사용해.

예:

HTML

    
      <!DOCTYPE html>
      <html>
        <head>
          <title>Document</title>
          <style>
            .highlight {
              background-color: yellow;
            }
          </style>
        </head>
        <body>
          <p id="myParagraph" class="highlight">This is a paragraph.</p>

          <script>
            const paragraph = document.getElementById('myParagraph');
            console.log(paragraph.classList.contains('highlight')); // 출력: true
            paragraph.classList.remove('highlight');
            console.log(paragraph.classList.contains('highlight')); // 출력: false
          </script>
        </body>
      </html>

4.3 스타일 조작

1. 인라인 스타일 변경

요소의 인라인 스타일을 변경하려면 style 속성을 써.

예:

HTML

    
      <!DOCTYPE html>
      <html>
        <head>
          <title>Document</title>
        </head>
        <body>
          <p id="myParagraph">This is a paragraph.</p>

          <script>
            const paragraph = document.getElementById('myParagraph');
            paragraph.style.color = 'red';
            paragraph.style.fontSize = '20px';
          </script>
        </body>
      </html>

2. 계산된 스타일 얻기

요소의 현재 계산된 스타일을 얻으려면 window.getComputedStyle() 메소드를 사용해.

예:

HTML

    
      <!DOCTYPE html>
      <html>
        <head>
          <title>Document</title>
          <style>
            #myParagraph {
              color: blue;
              font-size: 18px;
            }
          </style>
        </head>
        <body>
          <p id="myParagraph">This is a paragraph.</p>

          <script>
            const paragraph = document.getElementById('myParagraph');
            const styles = window.getComputedStyle(paragraph);
            console.log(styles.color); // 출력: rgb(0, 0, 255) 또는 파란색
            console.log(styles.fontSize); // 출력: 18px
          </script>
        </body>
      </html>

3. 인라인 스타일 삭제

인라인 스타일을 삭제하려면 스타일 값을 빈 문자열로 설정하면 돼.

예:

HTML

    
      <!DOCTYPE html>
      <html>
        <head>
          <title>Document</title>
        </head>
        <body>
          <p id="myParagraph" style="color: red; font-size: 20px;">This is a paragraph.</p>

          <script>
            const paragraph = document.getElementById('myParagraph');
            paragraph.style.color = '';
            paragraph.style.fontSize = '';
          </script>
        </body>
      </html>

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION