자바 스크립트로 div에 다른 클래스 추가

Question

양식 제출의 나이를 확인한 다음 나이에 따라 div에 새 콘텐츠를 반환하는 기능이 있습니다. 지금은 html 콘텐츠를 대체하기 위해 getElementById를 사용하고 있습니다. 내가 div에 클래스도 추가 할 수 있다면 나에게 더 좋을 것 같아. 그래서 내가 가지고 예를 들어 .. 내가하고 싶은 무엇

if (under certain age) { 
    document.getElementById('hello').innerHTML = "<p>Good Bye</p>"; 
    createCookie('age','not13',0) 
    return false; 
} else { 
    document.getElementById('hello').innerHTML = "<p>Hello</p>"; 
    return true; 
} 

는 사업부에서 모든 것을 가지고 그 사업부가 사라지고 다른 콘텐츠로 교체하면 것은 false를 돌려입니다 .. 내가 좋은에 어떤 아이디어를 얻을 수 있습니다 순수한 자바 스크립트로 이것을 달성하는 방법. 이 특정 함수에 대해 jQuery를 사용하고 싶지 않습니다.

Answer 1

를 참조하십시오, 그것을 하나를 제공합니다. 그렇지 않으면, 새로운 클래스 이름 뒤에 추가 공간 다음에 DOM

var el = document.getElementById('hello'); 
    if(el) { 
    el.className += el.className ? ' someClass' : 'someClass'; 
    } 

Answer 2

className 회원에게는 선행 공백으로 클래스를 추가 할 수 있습니다. 요소가 어떤 클래스가없는 경우

document.getElementById('hello').className += ' new-class'; 

이 https://developer.mozilla.org/En/DOM/Element.className

Answer 3

를, 요소의 클래스는 공간에 의해 분리 단지 각 클래스이다. 필요에 따라 클래스를 삽입/제거하기 위해 파싱 로직을 구현하면됩니다.

궁금한데 ... 왜 jQuery를 사용하고 싶지 않을까요? 이런 종류의 문제를 쉽게 해결해줍니다.

Answer 4

글쎄 document.getElementById('hello').setAttribute('class', 'someclass');을 사용해야합니다.

innerHTML 예기치 않은 결과가 발생할 수 있습니다! 다음을 고려하세요;

var myParag = document.createElement('p'); 

if(under certain age) 
{ 
    myParag.text="Good Bye"; 
    createCookie('age', 'not13', 0); 
    return false; 
{ 
else 
{ 
    myParag.text="Hello"; 
    return true; 
} 

document.getElementById('hello').appendChild(myParag); 

Answer 5

나는 동일한 문제에 직면하고있다. 부모 요소가 숨겨져 있으면 선택한 요소를 표시 한 후 드롭 다운이 표시되지 않습니다. 이것은 완벽한 해결책은 아니지만 문제가 해결되었습니다. 요소를 표시 한 후 다음 코드를 사용할 수 있습니다.

function onshowelement() { $('.chosen').chosen('destroy'); $(".chosen").chosen({ width: '100%' }); } 

Answer 6

나는 당신이 그것을

Answer 7

에 UIKit 스타일을 추가해야합니다 ...

document.getElementById("spin_it").onmouseover=function(e){ 
 
var el = document.getElementById("spin_it"); 
 
var Classes = el.className; 
 
var NewClass = Classes+" uk-icon-spin"; 
 
el.className = NewClass; 
 
console.log(e); 
 
}

<span class="uk-icon uk-icon-small uk-icon-gear" id="spin_it"></span>

이 코드는 여기에 작동하지 그냥 자바 스크립트를 사용하여 UiKit 기어 아이콘을 애니메이션으로 아래와 같은 기능을 사용

사용 Element.classList

document.getElementById('hello').classList.add('someClass'); 

.add 메소드는 클래스에 요소가없는 경우에만 클래스를 추가합니다. 따라서 중복 된 클래스 이름에 대해 걱정할 필요가 없습니다.