如何让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], 

我在一个静态网页转换成on Rails应用程序一个Ruby的中间并且这段代码在原始项目上工作得很好，但是我在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高度。