如何用原生JavaScript判断元素类名并执行对应主题函数？

数据老陈

2026-7-27

解决方案：根据按钮主题类执行对应函数

方法一：原生JavaScript（推荐，无需依赖jQuery）

直接用原生JS的classList.contains()方法检查类名，同时通过this传递当前点击的按钮元素，避免选择器歧义：

修改后的HTML：

<button id="fullscreen" class="fullscreen dark" onclick='checkClass(this)'> Fullscreen </button>

对应的JavaScript函数：

function checkClass(btn) {
    if (btn.classList.contains('dark')) {
        openFullscreenDark();
    } else if (btn.classList.contains('light')) {
        openFullscreenLight();
    }
}

方法二：修复jQuery版本

如果要继续用jQuery，先确保页面已引入jQuery库，再优化选择器精度（比如通过ID定位按钮，避免匹配多个元素）：

修改后的JavaScript函数：

function checkClass() {
    const fullscreenBtn = $('#fullscreen');
    if (fullscreenBtn.hasClass('dark')) {
        openFullscreenDark();
    } else if (fullscreenBtn.hasClass('light')) {
        openFullscreenLight();
    }
}

也可以通过this传递当前元素，让逻辑更通用：
HTML：

<button id="fullscreen" class="fullscreen dark" onclick='checkClass(this)'> Fullscreen </button>

JS：

function checkClass(btn) {
    const $btn = $(btn);
    if ($btn.hasClass('dark')) {
        openFullscreenDark();
    } else if ($btn.hasClass('light')) {
        openFullscreenLight();
    }
}