如何在元素class对应display:block时自动触发链接点击？

原代码存在的问题 #

• 选择器错误：原代码中$('hidden')未添加类选择器前缀.，正确类选择器应为$('.hidden')
• 判断display属性的方式错误：is('display')不是jQuery判断样式属性的正确写法，需通过.css('display')获取元素的display值，或用.is(':visible')判断元素是否可见（display:block会使元素可见）

修正后的代码实现 #

HTML代码

<div id="HIDDENDIV" class="hidden">this is a div</div>
<a href="https://www.google.com" id="urlx">Google go example!</a>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="path-para-seu-script"></script>

CSS代码

.hidden { display: block; }

JavaScript代码

// 判断元素display是否为block，触发链接点击
if ($('.hidden').css('display') === 'block') {
    document.getElementById("urlx").click();
}

// 也可以用jQuery的.click()方法简化写法
// if ($('.hidden').css('display') === 'block') {
//     $('#urlx').click();
// }

扩展：动态监听元素样式变化 #

如果目标元素的display是后续操作动态修改的，单次判断不会生效，可通过监听样式变化实现触发：

const targetDiv = document.getElementById('HIDDENDIV');
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.attributeName === 'style' && $(targetDiv).css('display') === 'block') {
            $('#urlx').click();
            observer.disconnect(); // 触发后停止监听，避免重复执行
        }
    });
});

// 配置监听：仅监听元素style属性变化
observer.observe(targetDiv, { attributes: true, attributeFilter: ['style'] });

内容的提问来源于stack exchange，提问作者Thiago Vinic