我在一个网站上工作,有时我需要在标题中加载一个大横幅。标题有一些默认样式,如果特定页面有横幅,我需要删除这些样式。这些额外的样式在一个类中,如果存在横幅,则会在服务器端删除该类。它适用于除IE9之外的所有浏览器。
document.onreadystatechange = function () {
// Initialize app when document is "ready"
if (document.readyState == "complete") {
var dom = {};
dom.$header = document.querySelector('.js-header');
dom.$banner = document.querySelector('.js-banner-image');
resizeBanner();
}
}
function resizeBanner(){
if(dom.$banner && dom.$banner !== null && dom.$banner !== undefined) {
dom.$header.classList.remove('has-no-banner');
}
}
浏览器在尝试删除类时会停止,因为它"无法获取未定义或null引用的属性"remove"。但是,变量已经定义,并且元素存在于DOM中。
如果我转到一个没有横幅的页面,函数就不会激发(这是预期的行为),所以从逻辑上讲,这不是条件错误,它发现dom.$banner
很好,但只是为了测试我尝试给元素一个ID,并在我的方法之前声明它。这并没有解决问题。
脚本文件在我的文档底部用defer async
引用。
我在这里做错了什么?
IE9中不支持.classList
属性。使用更传统的添加/删除类的方法,如下所示:在javascript 中添加和删除对象