javaScript/jQuery
부모좌표 기준으로 지역 위치 설정하기 css() 정렬 변경
mooyou
2023. 3. 29. 12:43
728x90
300x250
SMALL
css()메서드를 사용해서 부모좌표 기준으로 지역 위치를 설정할 수 있다.
$대상.css("left/top",값)
$대상.css({
left:값,
top:값
})
위치 값은 숫자 또는 문자열 모두 가능하며 숫자 값인 경우 jQuery 내부에서 자동으로 기본 단위인 "px"를 붙여서 처리한다.
정렬 버튼을 클릭하면 숫자가 대각선 모양으로 정렬 되도록
<script>
$(document).ready(function() {
$("#btnAlign").click(function(e) {
var startX = 50;
var startY = 50;
$(".num").each(function(index){
$(this).css({
left:startX,
top:startY
})
startX += 50;
startY += 50;
})
});
})
</script>
<button id="btnAlign">
정렬
</button>
<div class="box">
<div class="num"><p>1</p></div>
<div class="num"><p>2</p></div>
<div class="num"><p>3</p></div>
<div class="num"><p>4</p></div>
<div class="num"><p>5</p></div>
</div>
728x90
반응형
LIST