如何使Javascript函數在Rails應用程序中工作？

Question

我收到此錯誤消息：

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. 

第二行代碼被標記

var nav                 = document.querySelector('.navv'),
nav_height          = getComputedStyle(nav).height.split('px')[0],

我正在將靜態網頁轉換為Ruby on Rails應用程序，並且此代碼在原始項目上可以正常工作，但是我在Rails上收到此錯誤消息。 如何使此代碼再次起作用？

這是其余的Refreence函數：

var nav                 = document.querySelector('.navv'),
nav_height          = getComputedStyle(nav).height.split('px')[0],
nav_links           = document.querySelector('.nav-links'),
//nav_links_height    = getComputedStyle(nav_links).height.split('px')[0],
sticky_class        = 'is-fixed';
//unfixed             = 'unfixed'


function stickyScroll(e) {

if( window.pageYOffset > (nav_height) ) {
nav_links.classList.add(sticky_class);
}

if( window.pageYOffset < (nav_height) ) {
nav_links.classList.remove(sticky_class);

 }
}

Answer 1

在調用window.getComputedStyle之前，您實際上並沒有檢查該元素是否存在。

Document.querySelector()
如果找不到匹配項，則返回null否則返回null 。 否則，它返回第一個匹配的元素。
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

處理DOM時，應始終進行防御性編碼，並確保在嘗試使用元素之前確實存在該元素。

var nav = document.querySelector('.navv'),
  nav_height,
  nav_links,
  sticky_class = 'is-fixed';

if (nav) {
  // Calling global functions explicitly is good style
  nav_height = window.getComputedStyle(nav).height.split('px')[0];
  nav_links = document.querySelector('.nav-links');
}

function stickyScroll(e) {
  if( window.pageYOffset > (nav_height) ) {
    nav_links.classList.add(sticky_class);
  }

  if( window.pageYOffset < (nav_height) ) {
    nav_links.classList.remove(sticky_class);
  }
}

更好的是重構：

function stickyScroll(e, nav_links) {
  var nav_height = e.offsetHeight,
      sticky_class = 'is-fixed';
  if( window.pageYOffset > (nav_height) ) {
    nav_links.classList.add(sticky_class);
  }
  if( window.pageYOffset < (nav_height) ) {
    nav_links.classList.remove(sticky_class);
  }
}

因為如果在調整窗口大小時將其用作事件處理程序，則需要重新評估.navv的高度。