javascript - 如何让 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 上收到此错误消息。我怎样才能让这段代码再次工作？

以下是函数的其余部分供引用:

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.getCompulatedStyle之前，您实际上并没有检查该元素是否存在。

Document.querySelector()
Returns null if no matches are found; otherwise, it returns the first matching element.
https://developer.mozilla.org/en-US/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 的高度。