UFO ET IT

jquery를 사용하여 상단 위치를 설정하는 방법

ufoet 2020. 11. 25. 21:42
반응형

jquery를 사용하여 상단 위치를 설정하는 방법


맞춤 div 스크롤러를 만들고 콘텐츠 div의 상단 위치를 설정하고 싶습니다. 내 jquery 코드는 다음과 같습니다.

containerOuterHeight=$("#messagePopUpContainer").outerHeight();
            contentOuterHeight=$("#content").outerHeight();
            contentTopPosition=$("#content").offset().top;
            alert("contentTopPosition"+contentTopPosition);
            alert(contentTopPosition-(containerOuterHeight/20));
            $("#content").offset().top=contentTopPosition-(containerOuterHeight/20);
            //$("#content").css("top",( contentTopPosition-(containerOuterHeight/20) ) + "px");
            alert("contentTopPosition"+$("#content").offset().top);
            //alert("Fontsize"+$('#content').css('font-size') );

html은 다음과 같습니다.

<div id='messagePopUpContainer' style='background-color:#ffffff; overflow: hidden;'>
<a href='javascript:void(0);' id='popupanchor' onkeydown='PopupKeyHandler("' + elmId + '");'></a>

<div id='content' style='width:350px'>' + methods.settings[elmId].text + '</div >
<div id='popupReturn'>Return</div></div></div>'

CSS를 사용하여 트릭을 수행 할 수 있습니다.

$("#yourElement").css({ top: '100px' });

.css ()를 사용하여 CSS 속성에 액세스하고 조작하는 것은 매우 쉽습니다 . 예를 들어, 단일 속성을 변경하려면 :

$("selector").css('top', '50px');

당신은 또한 할 수 있습니다

   var x = $('#element').height();   // or any changing value

   $('selector').css({'top' : x + 'px'});

또는

직접 사용할 수 있습니다

$('#element').css( "height" )

차이 .css( "height" ).height()하다 후자 리턴 (예를 들어, 단위가없는 화소 값 400) (예를 들어, 그대로 단위 전 복귀하면서 값 400px). .height () 메서드는 요소의 높이를 수학적 계산에 사용해야 할 때 권장됩니다. jquery 문서


참고로 다음을 사용하는 경우 :

 $(el).offset().top 

위치를 얻으려면 부모 요소의 위치에 영향을받을 수 있습니다. 따라서 일관성을 유지하고 다음을 사용하여 설정할 수 있습니다.

$(el).offset({top: pos});

위의 CSS 방법과 반대입니다.


그리고 프로토 타입으로 :

$('yourDivId').setStyle({top: '100px', left:'80px'});

참고 URL : https://stackoverflow.com/questions/10597769/how-to-set-top-position-using-jquery

반응형