[JavaScript] style.setProperty()

 

 

ChatGPT에게 style.setProperty()에 대해 물어보았다.

 

 

                                                                               

 

 

 

ChatGPT

'style.setProperty' 메소드는 JavaScript를 사용하여 HTML 요소의 스타일 속성을 동적으로 설정하거나 업데이트할 때 사용됩니다. 이 메소드는 CSS 스타일 속성의 이름과 값을 매개변수로 받아서 해당 요소의 스타일을 설정할 수 있게 해줍니다. 이 방법은 CSS 속성 이름을 문자열로 직접 지정하기 때문에 표준 CSS 속성 이름을 사용해야 하며, JavaScript에서 일반적으로 사용하는 camelCase 대신 CSS에서 사용하는 kebab-case를 사용해야 합니다.

 

사용 방법

'style.setProperty(propertyName, value, priority)' 메소드는 세 가지 매개변수를 받습니다:

1. propertyName: 설정하려는 CSS 속성의 이름 (예: "color", "background-color", "margin-top" 등). 속성 이름은 CSS 표준에 따라 문자열로 지정되며, kebab-case를 사용합니다.
2. value: 해당 속성에 설정하려는 값 (예: "red", "15px", "100%" 등). 값도 문자열로 지정합니다.
3. priority (선택적): "important"를 지정할 수 있어 CSS의 !important 규칙을 적용할 수 있습니다. 이 매개변수는 생략 가능하며, 기본적으로는 우선순위가 없습니다.

예제

html

<div class="myDiv">Hello, world!</div>
<button type="button" class="mybtn">Change Style</button>

 

JavaScript (script.js)

function changeStyle() {
  var myDiv = document.getElementById('myDiv');
  myDiv.style.setProperty('background-color', 'blue');
  myDiv.style.setProperty('color', 'white');
  myDiv.style.setProperty('padding', '20px');
}

위 예제에서는 changeStyle 함수가 실행될 때 myDiv 요소의 배경색을 파란색으로, 텍스트 색을 흰색으로, 패딩을 20px으로 변경합니다. 여기서 setProperty 메소드는 각 스타일 속성을 명확하고 의도적으로 설정하는 데 사용됩니다.

 

장점

• 명확성: style.setProperty를 사용하면 어떤 CSS 속성이 변경되는지 코드에서 명확하게 볼 수 있습니다.
• 유연성: CSS 속성 값이나 이름을 변수로부터 동적으로 설정할 수 있습니다.
• !important 사용 가능: CSS의 !important 규칙을 필요에 따라 적용할 수 있습니다.

이 메소드는 웹 개발에서 동적 스타일 변경이 필요할 때 매우 유용하며, 프로그램 로직에 따라 요소의 스타일을 세밀하게 제어할 수 있습니다.

---

 

                                                                                 

적절한 예시까지 너무 훌륭하다!!

 

 

 

예시 토대로 작성해 보았다.

-css root: 로 공통칼라를 선언하고 그 변수를 호출했다.

-마크업에 아이디보단 클래스를 이용하는게 편해서 수정했다.

-버튼 두개시 선택된 버튼은 토글,  선택된 버튼 외에 버튼들은 초기화 시키는 것을 추가했다.

 

const myDiv = [...document.querySelectorAll('.myDiv')];
const myBtn = [...document.querySelectorAll('.mybtn')];

myBtn.forEach((_)=>{
    _.addEventListener('click',()=>{    //버튼 클릭시
        
        myBtn.forEach((e)=>{    //모든 버튼 클래스 해제, 스타일 초기화
            e.classList.remove('active'); 
            e.closest('.myDiv').style.setProperty('background-color', 'var(--bg_aliceblue)');
            e.previousElementSibling.style.setProperty('color','var(--text_gray)');
            e.innerText = 'Change Style';
        })  

        _.classList.add('active');  // 선택한 버튼만 클래스
        if(_.classList.contains('active')){     // 선택한 버튼에 클래스가 존재한다면
        _.closest(".myDiv").style.setProperty('background-color', 'var(--bg_blue)');
        _.previousElementSibling.style.setProperty('color', 'var(--text_white)');
        _.innerText = 'Change On';
        }else{
            _.classList.add('active'); 
            _.closest('.myDiv').style.setProperty('background-color', 'var(--bg_aliceblue)');
            _.previousElementSibling.style.setProperty('color','var(--text_gray)');
            _.innerText = 'Change Style';
            }
        })
    })
})

 

See the Pen property_1 by gaae (@gaae) on CodePen.