[JavaScript] JavaScript와 jQuery로 HTML 요소 스타일 변경하기

jQuery 활용하여 클릭시 변경, 안보이기 표시하기 등 하는법

Aug 29, 2024

[JavaScript] JavaScript와 jQuery로 HTML 요소 스타일 변경하기

Contents


const idBtn = document.querySelector("#myBtn");
const classBtn = document.querySelector(".myBtn");
const tagBtn = document.querySelector("button");

아이디, 클래스, 태그 선택방법 한번 더 보고 넘어가기.


function hideDisplay() {
    let el = document.querySelector("#innerBox1");
    el.style.display = "none";
}
function hideVisible() {
    let el = document.querySelector("#innerBox2");
    el.style.visibility = "hidden";
}

// 동일한 코드를 jQuery 로 
function hideDisplay() {
    $("#innerBox1").hide();
}
function hideVisible() {
    $("#innerBox2").hide();
}

/*
function hideVisible() {
    //$("#innerBox2").remove();
    let box2 = document.querySelector("#innerBox2");
    box2.remove();
} remove 도 바닐라 자바 스크립트로 가넝
*/

display 와 visible 은 숨길때 차이가 있다.

display 로 숨긴 경우 외부 박스 크기도 줄어든다.

visible 의 경우 내부 박스만 제거되고 외부 박스는 크기를 유지한다.

용도에 따라 적절히 스타일 활용해야함.


 <style>
 .box {
 border: 1px solid black;
 padding: 10px;
 }
 #innerBox1 {
 display: none;
 }
 #innerBox2 {
 visibility: hidden;
 }
 </style>

안보이는 상황 설정을 위해 미리 스타일 지정을 해 놓는다.


  function showByDisplay(){
 let el = document.querySelector("#innerBox1");
 el.style.display = "block";
 }
 function showByVisible(){
 let el = document.querySelector("#innerBox2");
 el.style.visibility = "visible";
 }
====================================================== 같음
function showByDisplay() {
    $("#innerBox1").css("display", "block");
}
function showByVisible() {
    $("#innerBox2").css("visibility", "visible");
}

Dom 추가

jQuery 로 작성하기 위해 render 정의부터 합니다.

바닐라 스크립트를 제이쿼리로 바꾸면 앞서 정의한 render 을 호출함으로서 html 템플릿을 설정하는 부분이 let box = render("inner1", "내부박스1"); 로 줄어들게 됩니다.

바닐라 스크립트로 append() 라고 했다면 제이쿼리 역시 동일하게 아이디 선택 후 append() 를 사용합니다.

전체 코드


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

<body>
    <h1>추가하기</h1>
    <button onclick="addAppend()">append로 추가하기</button>
    <button onclick="addPrepend()">prepend로 추가하기</button>
    <button onclick="addBefore()">before로 추가하기</button>
    <button onclick="addAfter()">after로 추가하기</button>
    <div class="box" id="outerBox">

    </div>

    <script>
        function render(id, text) {
            return `<div class="box" id="${id}">${text}</div>`;
        }


        function addAppend() {
            //let newEl = document.createElement("div"); // 빈에 dom생성
            //newEl.setAttribute("class", "box");
            //newEl.setAttribute("id", "innerBox1");
            //newEl.innerHTML = "내부박스1";
            //
            //let el = document.querySelector("#outerBox");
            //el.append(newEl);

            let box = render("inner1", "내부박스1");
            $("#outerBox").append(box);
        }
        function addPrepend() {
            //let newEl = document.createElement("div");
            //newEl.setAttribute("class", "box");
            //newEl.setAttribute("id", "innerBox2");
            //newEl.innerHTML = "내부박스2";
            //
            //let el = document.querySelector("#outerBox");
            //el.prepend(newEl);

            let box = render("inner2", "내부박스2");
            $("#outerBox").prepend(box);
        }
        function addBefore() {
            //            let newEl = document.createElement("div");
            //            newEl.setAttribute("class", "box");
            //            newEl.setAttribute("id", "innerBox3");
            //            //newEl.innerHTML = "내부박스3";

            //            let el = document.querySelector("#outerBox");
            //            el.before(newEl);

            let box = render("outer1", "외부박스1");
            $("#outerBox").before(box);
        }
        function addAfter() {

            //let newEl = document.createElement("div");
            //newEl.setAttribute("class", "box");
            //newEl.setAttribute("id", "innerBox4");
            //newEl.innerHTML = "내부박스4";

            //let el = document.querySelector("#outerBox");
            //el.after(newEl);

            let box = render("outer2", "외부박스2");
            $("#outerBox").after(box);
        }

    </script>
</body>

</html>

https://www.devkuma.com/docs/jquery/element-append-prepend-before-after/

조금 더 다양한 jQuery 메서드 확인이 가능한 사이트.

반복문 리스트 만들기

상단의 render 버튼을 누르면 스크립트의 render() 이 호출되어 makeCard(i) 를 통해 내부 요소가 생성됩니다.

makeCard 는 html 템플릿을 지정하고 동적으로 id를 할당하여 삭제 버튼도 함께 생성합니다.

del 은 생성될 때 받은 id와 #card card 의 id를 선택하여 삭제를 합니다.

이를 jQuery 로 변환하여 보겠습니다.


function render() {
    for (let i = 1; i < 5; i++) {
        $("#outerBox").append(makeCard(i));
    }
}

// 2. DOM 만들기
function makeCard(id) {
    return `<div id="card-${id}" class="card">
                <h3>제목${id} 입니다</h3>
                <p>내용${id} 입니다</p>
                <button onclick="del(${id})">삭제</button>
            </div>`;
}
function del(id) {
    $(`#card-${id}`).remove();
}

https://www.w3schools.com/jquery/jquery_css.asp

제이쿼리 참고 사이트