<body>
<div id="foo"></div>
<button onclick ="addClass(el,'Test') ">click</button>
</body>
<script>
function addClass(element, myClass) {
element.className = myClass;
}
var el = document.getElementById('foo');
</script>
이전 클래스를 삭제하지 않고 더 많은 클래스를 추가하고 싶습니다.자바 스크립트를 사용하여 요소에 CSS 클래스 추가
이 시도 :
function addClass(element, myClass) {
element.className += ' ' + myClass;
}
var foo = document.getElementById('foo');
addClass(foo, 'a');
addClass(foo, 'b');
CSS 클래스 때문에, 속성에 구분 된 공간입니다
function addClass(element, myClass){
element.className += ' '+myClass;
}
또는 현대적인 브라우저, classList API를 사용
function addClass(element, myClass){
element.classList.add(myClass);
}
...하는 당신도 polyfill for older browsers 수 있습니다.
당신이 classList를 사용하고 class 속성은 문자열에서 지정된 클래스의 인스턴스가 있는지 확인하고 싶어하지 않는 경우 (완전히 불필요하지만 OCD를 위해) 먼저 제거 할 수 있습니다
var re = new RegExp("(?:^|\\s)"+myClass+"(?:\\s|$)", 'g');
el.className = el.className.replace(re, '');
** classList에 대한 + 1 **;)). –
좋아, 그 달콤한 kbd 데모 스타일 +1 :) 나는 그것을 완전히 훔치고있어 :) – Phrogz
@Phrogz 그것은 네가 ... ':)'. –