用 JS 更改元素的屬性

時間 2019-12-06

原文原文鏈接

用 bigSlide 生成的可滑動側邊欄須要更改其定位和高度屬性，更改定位令其與中間內容區域的頂部對齊，更改高度令其與中間內容區域的底部對齊。這個問題能夠拆分爲下面幾個需求來依次實現：css

更改側邊欄定位

獲取中間內容區域頂部與頁面最上方的距離

經過結合 CSS 選擇器，能夠快速定位目標元素，而後利用 offset() 方法的 top 屬性，便可獲得元素頂部與頁面最上方的距離。jquery

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

參考內容：jQuery: the offset() and position() methodide

獲取頁面頂部導航欄的高度

因爲側邊欄是相對定位，默認位置緊鄰頂部導航欄，那麼若是要與右側的內容區域頂端對齊，則側邊欄向下移動的距離，就等於內容區域與頁面最上方的距離，減去頁面頂部導航欄的高度。測試

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

設置側邊欄定位

有了中間內容區域頂部與頁面最上方的距離，以及頁面頂部導航欄的高度，側邊欄須要向下移動的距離很容易就算出來了。.net

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

參考內容：how to remove only one style property with jquery插件

更改側邊欄高度

原理與上面更改側邊欄定位的思路相同，中間內容區域頂部的位置已知，那麼只要知道中間內容區域底部的位置，就可以獲得該區域的高度，而後令側邊欄也爲相同高度便可。code

計算中間內容區域底部距頁面頂部的距離

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

令側欄高度爲中間內容區域高度

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

最終代碼

<script>
  $(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');
  });
</script>

JavaScript 執行順序

上面這段代碼，最初是放在 <head> 標籤內的尾部的，可是運行頁面發現這段代碼並未生效，在 Firebug 中逐句測試這段代碼時卻又生效了，經提醒應該是代碼未被執行，思考以後認爲應該是代碼在頁面中的位置有問題，以側邊欄插件 bigSlide 做爲關鍵字搜索，發現側邊欄初始化的代碼位於頁面最下方，這樣的話，頁面執行的順序實際上是先用本身的代碼調整了側邊欄的定位和高度，以後又經過 bigSlide 初始化插件，這樣自定義的部分固然不會生效了，將上面的代碼放在側邊欄插件初始化代碼以後，一切OK~~~視頻

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。