2016-06-13 3 views
1

JavaScript를 통해 정기적으로 노드를 숨기거나 표시하지만, 이제는 표시 할 때 inline-block (block이 아닌) 특정 클래스의 노드를 설정해야합니다. 내가 완전히 this.someAttachPoint처럼 뭔가 작업을 할 수 있지만, 때를 - divdata-dojo-attach-point 참조하는노드가 Dojo에 특정 클래스를 가지고 있는지 확인하는 방법은 무엇입니까?

show: function (div) { 
    if (typeof div === 'object' && typeof div.style === 'object') { 
     if (div.class == "inline-block-class") //this doesn't work 
     { 
      div.style.display = "inline-block"; 
     } else { 
      div.style.display = "block"; 
     } 
    } 
} 

: 그러나,이 inline-block 클래스와 나머지를 정렬에 문제가의 class이 컨텍스트의 null 그것을 다른 변수 (예 : div)에 포장하면 노드의 CSS 선택기 만 있습니다. 객체이지만 Firebug에서 속성을 가져올 수 없습니다. 나를 알리는 플래그가이 노드가 inline-block해야한다는

나는 다른 매개 변수를 추가하여이 문제를 해결할 수 있지만, 그것은 더럽고 오류에 대한 또 다른 기회, 그래서 함수 내에서 block/inline-block 구분을하는 것을 선호합니다.

답변

3

사용 dojo/dom-classdojo/dom-style 모듈은 DOM 노드의 클래스를 확인하고 스타일을 변경합니다. 이것에

show: function (div) { 
if (typeof div === 'object' && typeof div.style === 'object') { 
    if (domClass.contains(div, "inline-block-class")) 
    { 
     domStyle.set(div, 'display', 'inline-block'); 
    } else { 
     domStyle.set(div, 'display', 'block'); 
    } 
} 
} 

더 나은 솔루션은 div.style.display 자바 스크립트를 CSS를 사용하지 제어하는 ​​것입니다. Javascript로 클래스를 변경하고 CSS가 스타일을 처리하게하십시오.

+0

마지막 문장에 대해 hide (div) 설정을 none으로 설정하면이 기능을 보완 할 수 있으므로 순수한 CSS 방식이 내 경우에는 적용되지 않는 것 같습니다. 디스플레이 설정없이 div 숨기기 : 아무 것도 내가 어떻게 해야할지 모르겠다. 적절한 디스플레이 스타일을 갱신하는 것이 아주 쉬운 지에 대해별로 신경 쓰지 않는다. –

+1

각 상태에 대해 클래스를 정의하십시오. 'display : none','display : inline-block'을위한'inline-block-class','display : block'을위한'block-class'와 같은'invisible'과 같은 것입니다. 그리고 이제 Javascript에서 클래스를 조작하면 CSS가 자동으로 변경됩니다. – Himanshu

+1

주석의 접근 방식은 의미가 있습니다. display none! important를 사용하여 숨겨진 클래스를 정의한 다음 노드를 숨기고 표시하면서 추가하고 제거하십시오. –

2

DOM 요소 divElement.classList 속성을 사용할 수 있습니다. 메서드는 contains입니다.

요소의 클래스 속성에 지정된 클래스 값이 있는지 확인합니다.

if (div.classList.contains("inline-block-class")) 
{ 
    div.style.display = "inline-block"; 
} else { 
    div.style.display = "block"; 
} 
관련 문제