用 JS 更改元素的属性

chanjarster 发布于2019-08-19 18:25 / 2791人阅读

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

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

更改侧边栏定位 获取中间内容区域顶部与页面最上方的距离

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

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

参考内容：jQuery: the offset() and position() method

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

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

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

设置侧边栏定位

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

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

参考内容：how to remove only one style property with jquery

更改侧边栏高度

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

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

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

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

var contentAreaHeight = contentAreaBottomOffsetToTop - topOffsetToTop;
$("#menu").css("height", contentAreaHeight + "px");

最终代码

JavaScript 执行顺序

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

GPU云服务器云服务器 js 更改属性 js修改元素属性获取子元素属性 js js原型属性有什么用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79577.html

利用javascript获取并修改伪元素的值

摘要：利用方法选择到伪元素，然后利用方法获取对应的属性的值。具体用法可以参考的这篇文章而伪元素的属性值除了常规赋值外，还有一种特殊的方法来获取。具体实现参照，不再做具体分析参考文献获取元素值之方法熟悉虽然标题里写的是伪元素,不过这篇文章主要是说::before和::after，其余几个伪元素（::first-letter、::first-line、::selection等)由于没有cont...

SQC 2019-08-22 10:57 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（三）

摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。－－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...

王岩威 2019-08-29 10:54 评论0 收藏0
《DOM编程艺术》中CSS—DOM的总结（三）

摘要：前言这是系列最后一篇，本文主要总结了的用法，以及最后对函数进行抽象。一个多说无益，还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。前言：这是CSS－DOM系列最后一篇，本文主要总结了className的用法，以及最后对函数进行抽象。－－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－...

liukai90 2019-08-19 18:32 评论0 收藏0
CSS 自定义属性 -- 使用 JS 和不使用 JS

摘要：你曾想过在页面加载过后去修改或的变量值么我曾经尝试过但并没有成功因为当预处理的代码编译成了它的变量就不再是变量了然而自定义属性就没有这样的限制在该系列的文章中我曾提及过自定义属性它最牛扳的特性就是它的动态性它的强大我们一眼就能对比出来预处理你曾想过在页面加载过后去修改 Sass 或 Less 的变量值么? 我曾经尝试过, 但并没有成功, 因为当预处理的代码编译成了 CSS, 它的变...

megatron 2019-08-29 13:05 评论0 收藏0
后端开发者的Vue学习之路（一）

摘要：如果我们作为一个后端开发者想掌握一个前端框架，是一个好选择，因为它足够的易学。是语言的下一代标准。数据方法生命周期钩子函数其他有些内容比较重要，留到后面讲定义数据定义数据定义了数据，那么就可以在管理的区域中使用的获取数据的语法来获取数据。目录前言： iview组件库示例 element组件库示例 ...

番茄西红柿 2019-04-23 11:52 评论0 收藏0