JavaScript를 사용하여 동적으로 요소 스타일 속성 변경

div에 대한 특정 스타일 시트가 있습니다. 이제 js를 사용하여 div의 하나의 속성을 동적으로 수정하고 싶습니다.

내가 어떻게 해?

document.getElementById("xyz").style.padding-top = "10px";

이 올바른지?

거의 맞습니다.

(가)부터 -자바 스크립트 연산자, 당신은 정말 속성 이름에 그것을 가질 수 없습니다. 설정 border하거나 대신 한 단어로 된 경우 코드가 제대로 작동합니다.

그러나, padding-top및 하이픈이있는 속성 이름에 대해 기억해야 할 점은 자바 스크립트에서 하이픈을 제거하고 다음 문자를 대문자로 만드는 것이므로 귀하의 경우에는 paddingTop.

몇 가지 다른 예외가 있습니다. JavaScript에는 예약어가 있으므로 float예를 들어 그렇게 설정할 수 없습니다 . 대신 일부 브라우저에서는을 사용해야 cssFloat하고 다른 브라우저 에서는 styleFloat. 이와 같은 불일치의 경우 브라우저 비 호환성을 처리하는 jQuery와 같은 프레임 워크를 사용하는 것이 좋습니다.

다른 답변 외에도 스타일 속성에 대시 표기법을 사용하려면 다음을 사용할 수도 있습니다.

document.getElementById("xyz").style["padding-top"] = "10px";

비슷한 문제를 다음과 같이 해결합니다.

document.getElementById("xyz").style.padding = "10px 0 0 0";

도움이되기를 바랍니다.

style.setProperty기능 도 있습니다 :
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

document.getElementById("xyz").style.setProperty('padding-top', '10px');

// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');

다음과 같은 HTML이 있다고 가정합니다.

<div id='thediv'></div>

이 div의 스타일 속성을 수정하려면

document.getElementById('thediv').style.[ATTRIBUTE] = '[VALUE]'

[ATTRIBUTE]원하는 스타일 속성으로 바꿉니다 . '-'를 제거하고 다음 문자를 대문자로 만드십시오.

예

document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding

document.getElementById("xyz").style.padding-top = '10px';

될거야

document.getElementById("xyz").style["paddingTop"] = '10px';

이를 처리하기 위해 요소 ID와 CSS 속성을 포함하는 개체를 허용하는 함수를 사용하는 것이 좋습니다. 이렇게하면 한 번에 여러 스타일을 작성하고 표준 CSS 속성 구문을 사용합니다.

//function to handle multiple styles
function setStyle(elId, propertyObject) {
    var el = document.getElementById(elId);
    for (var property in propertyObject) {
        el.style[property] = propertyObject[property];
    }
}

setStyle('xyz', {'padding-top': '10px'});

더 나은 방법은 변수에 스타일을 저장할 수 있습니다. 이렇게하면 훨씬 더 쉽게 속성을 관리 할 수 ​​있습니다.

var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);

도움이되는 희망

아래 쿼리 선택기 방식 솔루션을 보지 못했다는 사실에 놀랐습니다 .

document.querySelector('#xyz').style.paddingTop = "10px"

CSSStyleDeclaration 솔루션, 허용되는 답변의 예

document.getElementById('xyz').style.paddingTop = "10px";

document.getElementById("xyz").setAttribute('style','padding-top:10px');

또한 일을 할 것입니다.

document.getElementById('id').style = 'left: 55%; z-index: 999; overflow: hidden; width: 0px; height: 0px; opacity: 0; display: none;';

나를 위해 일해