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

162

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

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

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

javascript css

— 스키 짓
소스

253

사용 element.style:

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

— KJYe. 이름 葉家仁
소스

14

비공식적 인 사람들은 -webkit-background-size어떻습니까? 일반 js로 이것을 설정하는 방법이 있습니까, 아니면 jQuery를 사용해야합니까?

— Luke

60

@Luke obj.style [ "-webkit-background-size"] = "400px"

— Daniel X Moore

이것은 실제로 스타일 시트가 아닌 요소의 요소 스타일을 지정합니다.

— Aft3rL1f3

56

그냥 설정하십시오 style:

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

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

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

— djdd87
소스

5

@Sime-내 인용문이 일치하지 않습니다. JS는 항상 표준이므로 큰 따옴표를 사용합니다. 어쨌든 첫 번째 줄에는 OP 질문에서 복사 한 작은 따옴표가 있습니다. 어쨌든 수정되었습니다.

— djdd87

1

글쎄, 그들은 지금 괜찮아,하지만 그들은 내 의견에 일치하지 :)

— 않았다

2

@Sime- "어쨌든 첫 번째 줄에는 OP 질문에서 복사 할 때 작은 따옴표가있었습니다. 어쨌든 수정되었습니다."

— djdd87

35

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

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

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

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

— 다니엘 X 무어
소스

17

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

menu.style.width = "100px";

— 저스틴 니스 너
소스

14

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

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

프로토 타입에서 나는 :

$(newElement).addClassName('blah')

— 새긴 금
소스

1

나에게서 +1-모든 CSS를 분리하는 것이 훨씬 쉽고 깨끗합니다.

— Ian Oxley

1

참조를 위해 이것의 jQuery 버전 ...$(selector).addClass('blah')

— zgr024

8

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');

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

— 마티아 아스 토리노
소스

6

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

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

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

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

— 적당한
소스

5

전역 속성을 추가하려는 경우 다음을 사용할 수 있습니다.

    var styleEl = document.createElement('style'), styleSheet;
            document.head.appendChild(styleEl);
            styleSheet = styleEl.sheet;
            styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);

— 헷 데프
소스

3

<h1>Silence and Smile</h1>
<input  type="button"  value="Show Red"   onclick="document.getElementById('h1').style.color='Red'"/>
<input  type="button"  value="Show Green" onclick="document.getElementById('h1').style.color='Green'"/>

— 모신 칸
소스

1

<body>
  <h1 id="h1">Silence and Smile</h1><br />
  <h3 id="h3">Silence and Smile</h3>

  <script type="text/javascript">
    document.getElementById("h1").style.color = "Red";
    document.getElementById("h1").style.background = "Green";
    document.getElementById("h3").style.fontSize = "larger" ; 
    document.getElementById("h3").style.fontFamily = "Arial";
  </script>
</body>

— 모신 칸
소스

1

하이픈이 없으면 대부분의 CSS 속성에서 잘 작동합니다.

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

과 같이 하이픈이있는 속성의 max-width경우로 변환해야 sausage-case합니다.camelCase

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

— Daut
소스

0

다음 코드는 스타일 시트를 변경하지 않고 대신 DOM을 변경한다는 것을 이해하는 것이 중요합니다.

document.getElementById("p2").style.color = "blue";

DOM은 스타일 시트 요소 특성의 계산 된 값을 저장하며 Javascript를 사용하여 요소 스타일을 동적으로 변경하면 DOM이 변경됩니다. 코드를 작성하는 방식이 역학에 영향을 줄 수 있으므로이 점에 유의하고 이해해야합니다. 요소 자체에 직접 쓰여지지 않은 값을 얻으려고하면 ...

let elem = document.getElementById('some-element');
let propertyValue = elem.style['some-property'];

... 코드 예제의 'propertyValue'변수에 저장 될 정의되지 않은 값을 반환합니다. CSS 스타일 시트 안에 작성된 속성을 가져오고 설정하는 작업을 수행 하고이 상황에서 스타일 속성 값을 설정 하는 단일 함수 를 원할 경우 매우 일반적인 상황입니다. 그런 다음 JQuery를 사용해야합니다.

$(selector).css(property,value)

유일한 단점은 JQuery를 알아야한다는 것입니다. 그러나 이것은 모든 Javascript 개발자가 JQuery를 배워야하는 많은 이유 중 하나입니다. 순수 JavaScript로 스타일 시트에서 계산 된 CSS 특성을 가져 오려면 사용해야합니다.

function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

이 메소드의 단점은 getComputedValue 메소드가 가져 오기만하고 설정하지 않는다는 것입니다. Mozilla의 계산 된 가치 활용 이 링크는 내가 여기서 다루었던 내용에 대해 더 자세히 설명합니다. 희망이 누군가를 돕는다 !!!

— Aft3rL1f3
소스

첫 번째 코드 블록에 내용이 없다고 생각합니까?

— zb226

1

고정

— Aft3rL1f3