[javascript] Javascript에서 CSS 속성을 설정 하시겠습니까?

Program / 글쓴이

나는 다음을 만들었습니다 …

var menu = document.createElement('select');

CSS 속성을 어떻게 설정 width: 100px합니까?

답변

사용 element.style:

var element = document.createElement('select');
element.style.width = "100px";

답변

그냥 설정하십시오 style:

var menu = document.createElement("select");
menu.style.width = "100px";

또는 원하는 경우 jQuery 를 사용할 수 있습니다 .

$(menu).css("width", "100px");

답변

대부분의 스타일에 대해 다음을 수행하십시오.

var obj = document.createElement('select');
obj.style.width= "100px";

이름에 하이픈이있는 스타일의 경우 대신 다음을 수행하십시오.

var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"

답변

실제로 바닐라 JavaScript는 매우 간단합니다.

menu.style.width = "100px";

답변

모든 답변은 요청한 작업을 올바르게 수행하는 방법을 알려주지 만 JavaScript를 사용하여 요소에 클래스를 설정하고 CSS를 사용하여 스타일을 지정하는 것이 좋습니다. 그렇게하면 행동과 스타일을 올바르게 구분할 수 있습니다.

사이트를 다시 스타일링 할 디자이너가 있다고 가정 해 봅시다 … JavaScript로 작업하지 않고도 CSS에서 순수하게 작업 할 수 있어야합니다.

프로토 타입에서 나는 :

$(newElement).addClassName('blah')

답변

2018 년에 똑같은 일을하고 싶은 사람들에게만

CSS 사용자 정의 특성을 CSS 또는 JS를 통해 요소에 지정하고 변경할 수 있습니다.

CSS를 통한 집약 :

element {
  --element-width: 300px;

  width: var(--element-width, 100%);
}

JS를 통한 할당

ELEMENT.style.setProperty('--element-width', NEW_VALUE);

JS를 통해 재산 가치를 얻으십시오

ELEMENT.style.getPropertyValue('--element-width');

유용한 링크는 다음과 같습니다.

답변

디버깅 할 때 한 줄에 많은 CSS 속성을 추가 할 수 있기를 바랍니다.

menu.style.cssText = 'width: 100px';

이 스타일에 익숙해지면 다음과 같이 한 줄에 CSS를 추가 할 수 있습니다.

menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';