CSS 속성 변경

Question

한 줄의 코드 내에서 CSS 속성을 변경할 수 있습니까? 두 가지 속성을 변경하려면 어떻게해야합니까? 당신이 jQuery를 사용하는 경우

document.getElementById('el').style.display = "inline"; 
document.getElementById('el').style.backgroundColor = "#000000"; 

Answer 1

당신은 자신의 liket을 수행 할 수 있습니다

$("#el").css({ display : "inline", "backgroundColor" : "#000000" }); 

Answer 2

document.getElementById('el').cssText = "display:inline; background-color:#000000"; 

Answer 3

당신이 (문자열로 CSS 값이 이미 요소에 대한 설정 다른 CSS가없는 경우 또는

document.getElementById("myElement").style.cssText = cssString; 

확인 SO 링크 : 당신은 CSSText의 재산을 우리에게 확인) 덮어 상관 없어

$("p").addClass("myClass yourClass"); 

을하거나 ATTR 방법 사용 : 자세한 내용은 https://stackoverflow.com/a/3968772/287100

Answer 4

당신은 예를 들어 jqueryf 사용하여 요소의 클래스를 변경하려고 할 수

$("p").attr("class" yourClass"); 

Answer 5

이동을 일부 클래스 스타일, 스타일을 별도로 적용하는 대신 클래스 이름을 사용하십시오. 이는 권장 사항입니다.

/*CSS*/ 
.yourClass { 
    display: inline; 
    background-color: #000 
} 

//JS 
document.getElementById('el').className = 'yourClass'; 

편집

얘들 아, 제발 - jQuery를 예제를 작성 중지합니다. 최소한 30KB의 라이브러리가 필요하지 않은 매우 간단한 작업입니다.

Answer 6

프레임 워크가 없으면 허용되는 솔루션이 없습니다. 당신이 반복 getElementById() 호출을 방지하고자하는 경우, 당신이 뭔가를 할 수 있습니다 :

var el = document.getElementById('el'); 
el.style.display = "inline"; 
el.style.backgroundColor = "#000000"; 

하지만 여전히 하나를 해결하지 않습니다 더 읽기와 의미 론적으로 더 정확한

var el = document.getElementById('el').style; 
el.display = "inline"; 
el.backgroundColor = "#000000"; 

또는 논증을 - 선 문제. 나는 다른 사람들과 마찬가지로 jQuery를 강력히 추천한다.