동적 스타일 적용 및 해제

스크립트로 동적으로 스타일을 적용하거나 해제할 수 있다.

// 동적 스타일 설정
function applyDynamicStyle()
{
    var sheet = document.createElement('style');
    sheet.id = "style_target1"; // 아이디 설정
    // 스타일 설정
    sheet.innerHTML = "button#target1{border:2px solid black; background-color:blue;}";
    document.head.appendChild(sheet);
}

// 스타일 제거 
function removeStyle()
{
    var sheet1 = document.getElementById("style_target1");
    if(sheet1 != null)
    {
        var parent1 = sheet1.parentNode;
        parent1.removeChild(sheet1);
    }
}

Dynamic Style application

addDynamicStyle.html