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

Document.querySelector()
如果未找到匹配项，则返回null;否则，它返回第一个匹配元素 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的高度。

如何让Javascript函数在Rails应用程序中运行？

1 个答案: