티스토리 뷰
발생일: 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 페이지에서 샘플을 확인해볼 수 있다.
반응형
댓글
공지사항