엘리먼트가 DOM에 붙기 전에 show()를 호출한 경우, 태그의 기본 스타일을 따른다.

발생일: 2015.03.23

키워드: jQuery, show, display, inline, inline-block, span

문제:
`inline-block` 스타일이 할당되어 있는 `<span>` 엘리먼트가 있다.
이 엘리먼트가 DOM에 붙기 전에 `show()`를 호출하게 된 케이스가 있었는데,
이상하게도 아래처럼 `inline-block`이 아닌 `inline`이 인라인 스타일로 추가되어 있다.

    <span style=“display:inline”>...</span>

왜 그런 걸까?


해결책:

엘리먼트가 DOM에 붙기 전에 show()를 호출한 경우,
css 스타일을 갖고 있더라도, “태그의 기본 속성에 따라” 스타일이 설정된다.

jQuery의 `show()`메서드에서 호출하는 기본 display 값 때문이고, 아래 코드에서 확인해볼 수 있다.


코드에서는, 기본 속성을 찾을 수 없으면 문서에 DOM 을 추가해서 기본값을 가져온다.


아래 jsbin 페이지에서 샘플을 확인해볼 수 있다.

카테고리

분류 전체보기 (711)
About me. (6)
Daylogs (676)
영어공부 (0)
My works - 추억 (29)
비공개 (0)