css 값 가져오기가 가능한가요?
본문
bxslider를 모바일에 적용중입니다. pager를 viewport위쪽으로 배치하고 싶은데 heigth값이 기기의 width값에따라 변동되어서 pager의 위치가 화면의 크기에 따라 들쭉날쭉합니다. ㅠㅠ
대략적인 소스코드입니다.
<div class="bx-wrapper" style="max-width: 640px;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 644px;"></div>
<div class="bx-controls bx-has-pager" style="position: relative; bottom: "></div>
</div>
제가 궁금한것은 css에서 bx-viewport의 height 값을 변수에 넣고 그변수를 bx-controls bx-has-pager의 bottom값에 넣는 방식이 가능한가요?
css에서 변수를 사용해 본적이 없어서 질문드립니다.
답변 2
css에 바로 변수를 적용할 수는 없습니다.
어떻게든 javascript로 컨트롤 될 수 있어야 합니다.
웹브라우저에서 변수로 어떤 값을 할당하거나 연산을 할려면
javascript로만 가능합니다.
위 문제는 아래 처럼 처리하시면 될것 같네요.
물론 jquery가 설치되어 있다는 가정하에서요.
<script>
$(function() {
var a = $(".bx-viewport").css("height");
$(".bx-has-pager").css("bottom", a);
});
</script>
%로 조정하시거나 미디어쿼리를 이용해 크기 별로 높이설정을 다르게 할 수 있습니다