设置 CSS 属性 - 过滤器：blur(x) with JS for site-inner class inner genesis framework;无法读取 null 的 属性 'getAttribute'

Question

我正在尝试在 "site-inner" class 上通过单击移动菜单按钮展开创世纪示例主题中的移动下拉菜单事件后使用 JS 实现模糊效果。

该按钮具有 aria-expanded 属性，我决定将其用作触发器。

在 Genesis Framework 中由 responsive-menus.js 创建的 HTML 元素：

<button class="menu-toggle dashicons-before dashicons-menu activated" aria-expanded="true" aria-pressed="true" id="genesis-mobile-nav-primary"></button>

下面是我使用的代码：

window.onload = blurFunction();

function blurFunction() {
    var x = document.getElementById("genesis-mobile-nav-primary").getAttribute("aria-expanded"); 
    if (x == "true") 
    {
    document.getElementById("site-inner").style.webkitFilter = "blur(8px)";  
    }
}

控制台 returns 以下内容：

Uncaught TypeError: 
Cannot read property 'getAttribute' of null.

Uncaught TypeError: 
Cannot set property 'webkitFilter' of undefined

编辑：

删除括号后函数实际执行 - 但是 - 我添加了一个 else 语句，这是唯一实际有效的部分。该函数运行，检查 aria-expanded 属性并将 else 条件添加到我添加了 id="st-pusher" 的站点内部元素。

代码如下：

window.onload = blurFunction;

function blurFunction() {
    let x = document.getElementById("genesis-mobile-nav-primary").getAttribute("aria-expanded");

    if (x == 'true') {
    document.getElementById("st-pusher").style.webkitFilter = "blur(8px)";  
    } else {
    document.getElementById("st-pusher").style.webkitFilter = "blur(0px)";  
    };
}

Answer 1

因为你做到了

window.onload = blurFunction();

而不是

window.onload = blurFunction;

因此 运行 您的函数会立即生效，而不是在页面准备就绪时将其分配给 运行。

Answer 2

事实证明，除了用于函数的括号之外，主要问题是我使用的事件处理程序。在我将其更改为 .onclick 事件后，现在一切正常，因为触发该功能的元素是移动菜单按钮。感谢大家一路相助:)

window.onclick = blurFunction;

    function blurFunction() {
        var x = document.getElementById("genesis-mobile-nav-primary").getAttribute("aria-expanded");

        if (x == "true") {
        document.getElementById("st-pusher").style.webkitFilter = "blur(8px)";  
        } else {
        document.getElementById("st-pusher").style.webkitFilter = "blur(0px)";  
        };
    }