用 JS 更改元素的屬性

chanjarster 發(fā)布于2019-08-19 18:25 / 2850人閱讀

摘要：設(shè)置側(cè)邊欄定位有了中間內(nèi)容區(qū)域頂部與頁(yè)面最上方的距離，以及頁(yè)面頂部導(dǎo)航欄的高度，側(cè)邊欄需要向下移動(dòng)的距離很容易就算出來(lái)了。

用 bigSlide 生成的可滑動(dòng)側(cè)邊欄需要更改其定位和高度屬性，更改定位令其與中間內(nèi)容區(qū)域的頂部對(duì)齊，更改高度令其與中間內(nèi)容區(qū)域的底部對(duì)齊。這個(gè)問題可以拆分為下面幾個(gè)需求來(lái)依次實(shí)現(xiàn)：

更改側(cè)邊欄定位 獲取中間內(nèi)容區(qū)域頂部與頁(yè)面最上方的距離

通過結(jié)合 CSS 選擇器，可以快速定位目標(biāo)元素，然后利用 offset() 方法的 top 屬性，即可得到元素頂部與頁(yè)面最上方的距離。

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

參考內(nèi)容：jQuery: the offset() and position() method

獲取頁(yè)面頂部導(dǎo)航欄的高度

由于側(cè)邊欄是相對(duì)定位，默認(rèn)位置緊鄰頂部導(dǎo)航欄，那么如果要與右側(cè)的內(nèi)容區(qū)域頂端對(duì)齊，則側(cè)邊欄向下移動(dòng)的距離，就等于內(nèi)容區(qū)域與頁(yè)面最上方的距離，減去頁(yè)面頂部導(dǎo)航欄的高度。

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

設(shè)置側(cè)邊欄定位

有了中間內(nèi)容區(qū)域頂部與頁(yè)面最上方的距離，以及頁(yè)面頂部導(dǎo)航欄的高度，側(cè)邊欄需要向下移動(dòng)的距離很容易就算出來(lái)了。

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

參考內(nèi)容：how to remove only one style property with jquery

更改側(cè)邊欄高度

原理與上面更改側(cè)邊欄定位的思路相同，中間內(nèi)容區(qū)域頂部的位置已知，那么只要知道中間內(nèi)容區(qū)域底部的位置，就能夠得到該區(qū)域的高度，然后令側(cè)邊欄也為相同高度即可。

計(jì)算中間內(nèi)容區(qū)域底部距頁(yè)面頂部的距離

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

令側(cè)欄高度為中間內(nèi)容區(qū)域高度

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

最終代碼

JavaScript 執(zhí)行順序

上面這段代碼，最初是放在標(biāo)簽內(nèi)的尾部的，但是運(yùn)行頁(yè)面發(fā)現(xiàn)這段代碼并未生效，在 Firebug 中逐句測(cè)試這段代碼時(shí)卻又生效了，經(jīng)提醒應(yīng)該是代碼未被執(zhí)行，思考之后認(rèn)為應(yīng)該是代碼在頁(yè)面中的位置有問題，以側(cè)邊欄插件 bigSlide 作為關(guān)鍵字搜索，發(fā)現(xiàn)側(cè)邊欄初始化的代碼位于頁(yè)面最下方，這樣的話，頁(yè)面執(zhí)行的順序其實(shí)是先用自己的代碼調(diào)整了側(cè)邊欄的定位和高度，之后又通過 bigSlide 初始化插件，這樣自定義的部分當(dāng)然不會(huì)生效了，將上面的代碼放在側(cè)邊欄插件初始化代碼之后，一切OK~~~