[Html] document.getElementsByTagName() 사용하여 css 스타일 수정 업데이트 하는 방법

Intro

안녕하세요. 이번 시간에는 document.getElementsByTagName()를 사용해서 css styles을 업데이트/수정하는 방법에 대해 알아보겠습니다. 

 

How to solve the problem

문제 해결을 위한 2가지 예시 코드를 보여드리겠습니다.

 

#1

모든 blockqutoe 태그를 가져와서 길이만큼 loop를 돌면서 스타일을 업데이트 해줍니다. 아래의 코드에선 margin을 0, borderLeft 스타일을 '5px solid rgb(9 9 9)'로 수정해줬습니다.

function changeBlockquote() {
    let li_tags = document.getElementsByTagName('blockquote');
    for (let i = 0; i < li_tags.length; i++) {
        li_tags[i].style.margin = String(0);
        li_tags[i].style.borderLeft = '5px solid rgb(9 9 9)';
    }
}

 

#2

모든 ul 태그를 가져와서 길이만큼 loop를 돌면서 list-style를 업데이트 해줍니다. 

function changeUl() {
    let li_tags = document.getElementsByTagName('ul');
    for (let i = 0; i < li_tags.length; i++) {
        li_tags[i].style.listStyle = 'disc';
    }
}

 

---

https://stackoverflow.com/questions/74391887/update-css-styles-using-getelementsbytagname