我试图在通过单击移动菜单按钮展开 Genesis 示例主题中的移动下拉菜单事件后，使用 JS 在“site-inner”类上实现模糊效果。

该按钮具有 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)";  
    }
}

控制台返回以下内容：

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

Uncaught TypeError: 
Cannot set property 'webkitFilter' of undefined

编辑：

删除括号后，函数实际上会执行 - 但是 - 我添加了 else 语句，这是唯一真正起作用的部分。该函数运行，检查 aria-expanded 属性并将 else 条件添加到我已添加 id="st-pusher" 的 site-inner 元素。

以下是代码：

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)";  
    };
}