python修改元素属性_用 JS 更改元素的属性

用 bigSlide 生成的可滑动侧边栏需要更改其定位和高度属性，更改定位令其与中间内容区域的顶部对齐，更改高度令其与中间内容区域的底部对齐。这个问题可以拆分为下面几个需求来依次实现：

更改侧边栏定位

获取中间内容区域顶部与页面最上方的距离

通过结合 CSS 选择器，可以快速定位目标元素，然后利用 offset() 方法的 top 属性，即可得到元素顶部与页面最上方的距离。

var topOffsetToTop = $('div.main-body div.view-tab.learn-tab').offset().top;

获取页面顶部导航栏的高度

由于侧边栏是相对定位，默认位置紧邻顶部导航栏，那么如果要与右侧的内容区域顶端对齐，则侧边栏向下移动的距离，就等于内容区域与页面最上方的距离，减去页面顶部导航栏的高度。

var topNavBarHeight = $('#header').height();

设置侧边栏定位

有了中间内容区域顶部与页面最上方的距离，以及页面顶部导航栏的高度，侧边栏需要向下移动的距离很容易就算出来了。

$('#menu').css("top", topOffsetToTop - topNavBarHeight + 'px');

更改侧边栏高度

原理与上面更改侧边栏定位的思路相同，中间内容区域顶部的位置已知，那么只要知道中间内容区域底部的位置，就能够得到该区域的高度，然后令侧边栏也为相同高度即可。

计算中间内容区域底部距页面顶部的距离

var contentAreaBottomOffsetToTop = $('#thread_view').offset().top + $('#thread_view').height();

令侧栏高度为中间内容区域高度

var contentAreaHeight = contentAreaBottomOffsetToTop - topOffsetToTop;

$('#menu').css("height", contentAreaHeight + 'px');

最终代码

$(document).ready(function () {

//

// 设置侧边栏的位置和高度

//

// 获取视频标题距离页面顶部距离

var topOffsetToTop = $('div.main-body div.view-tab.learn-tab').offset().top;

// 获取页面顶部导航栏高度

var topNavBarHeight = $('#header').height();

// 令侧边栏与导航栏之间的距离为上两者之差

$('#menu').css("top", topOffsetToTop - topNavBarHeight + 'px');

// 计算中间内容区域底部距页面顶部距离,不含底部pagination

var contentAreaBottomOffsetToTop = $('#thread_view').offset().top + $('#thread_view').height();

// 计算中间内容区域高度,不含底部pagination

var contentAreaHeight = contentAreaBottomOffsetToTop - topOffsetToTop;

// 令侧栏高度为中间内容区域高度

$('#menu').css("height", contentAreaHeight + 'px');

});

JavaScript 执行顺序

上面这段代码，最初是放在

标签内的尾部的，但是运行页面发现这段代码并未生效，在 Firebug 中逐句测试这段代码时却又生效了，经提醒应该是代码未被执行，思考之后认为应该是代码在页面中的位置有问题，以侧边栏插件 bigSlide 作为关键字搜索，发现侧边栏初始化的代码位于页面最下方，这样的话，页面执行的顺序其实是先用自己的代码调整了侧边栏的定位和高度，之后又通过 bigSlide 初始化插件，这样自定义的部分当然不会生效了，将上面的代码放在侧边栏插件初始化代码之后，一切OK~~~