如何使用jquery设置顶部位置答案

【问题标题】：How to set top position using jquery如何使用jquery设置顶部位置
【发布时间】：2018-04-18 20:45:53
【问题描述】：

我正在创建自定义 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>'

【问题讨论】：

试试$(element).position() ( $(element).position().top & $(element).position().left )

标签： jquery

【解决方案1】：

您可以使用 CSS 来解决问题：

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

【讨论】：

不应该是 ("propertyName", "propertyValue") ？

【解决方案2】：

使用.css() 访问 CSS 属性和操作非常容易。例如，要更改单个属性：

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

【讨论】：

【解决方案3】：

你也可以

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

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

或

可以直接使用

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

.css( "height" ) 和.height() 的区别在于后者返回一个无单位的像素值（例如400），而前者返回一个单位不变的值（例如400px）。当需要在数学计算中使用元素的高度时，建议使用 .height() 方法。 jquery doc

【讨论】：

【解决方案4】：

仅供参考，如果您正在使用：

 $(el).offset().top

要获取位置，可以受父元素位置的影响。因此，您可能希望保持一致并使用以下设置：

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

与上面的 CSS 方法相反。

【讨论】：

【解决方案5】：

还有原型：

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

【讨论】：

setStyle() 仅适用于 dom 元素。请改用css()。