为何querySelectorAll获取的类元素设置element.style.fontSize不生效？

我在WordPress开发中遇到JavaScript相关问题：现有setDynamicFontHeight.js脚本、header.php、调用wp_nav_menu的navbar_mobile.php，以及functions.php里的脚本注册逻辑。脚本已正确注册（弹窗可正常触发），header.php仅包含WordPress函数标记。

我希望setDynamicFontHeight(args)函数能将指定文本的高度调整为参考对象的高度，文本和参考对象可通过class或id调用。目前该函数对siteTitle文本（通过id调用）完全生效，但对mobileNavUl li元素（通过querySelectorAll获取）设置element.style.fontSize时无效，怀疑问题出在选择器或处理querySelectorAll返回数组的循环中。

相关代码 #

setDynamicFontHeight.js #

function setDynamicFontHeight 
(textToChange,referenceObject,classOrID,referenceObjectClassOrID){

//find out parent of textToChange

//handle class or id of textToChange and referenceObject
let textToChangeElement;
let referenceObjectSize;
switch (classOrID){
case "class": textToChangeElement = document.querySelector("."+textToChange);
break;
case "id": textToChangeElement = document.getElementById(textToChange);
break;
default: alert("Sie müssen für die Funktion setDynamicFontHeight im zweiten Argument angeben, ob der Text, dessen Höhe angepasst werden soll per ID(id) oder Klasse(class) angesprochen werden soll.");
break;
}
let textParentElement = textToChangeElement.parentElement;
//check for invalid arguments and for referenceObject = class or id. If ReferenceObject = null, then use parent element(default)
if(referenceObject == null){
referenceObjectSize = textParentElement;
}
else if (referenceObject != null && referenceObjectClassOrID == "class"){
referenceObjectSize = document.querySelector("."+referenceObject).offsetHeight;
}
else if (referenceObject != null && referenceObjectClassOrID == "id"){
referenceObjectSize = document.getElementById(referenceObject).offsetHeight;
}
else{
alert("Bitte geben sie die 4 Argumente für diese Funktion in der folgenden Reihenfolge an: textToChange,referenceObject,classOrID,referenceObjectClassOrID.");
}



//find out size of parent in vh
let viewportHeight = window.innerHeight;


//setting newFontHeightInVh

let newFontHeightInVh = (referenceObjectSize/viewportHeight*100*4/3);

//set font height
if(classOrID == "id"){
document.getElementById(textToChange).style.fontSize = (newFontHeightInVh+"vh");
}
else if(classOrID = "class"){
gotElementsOfClass = document.querySelectorAll(textToChange);
gotElementsOfClass.forEach(function(element) {
element.style.fontSize = (newFontHeightInVh+"vh");
});
}

}
//dynamic height for site title
setDynamicFontHeight("siteTitle","hamburger-box","id", "class");
setDynamicFontHeight("mobileNavUl li","siteTitle","class","class");
//dynamic height for the mobile navigation list

header.php #

<!DOCTYPE html>
<html lang="de">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title('') ?></title>
<link type="text/css" rel="stylesheet" href='<?php bloginfo('stylesheet_url')?>'>
<link type="text/css" rel="stylesheet" href="./wp-content/themes/almondotheme/template_parts/hamburgers/dist/hamburgers.css">
<?php wp_head(); ?>

</head>
<body <?php body_class(); ?>
    <div class="sitewrapper">
        <header>
            <div class="header-sub-wrapper">

            <div class="mobilenavhamburger-wrapper">
            <button id="mobilenavhamburger"class="mobilenavhamburger hamburger 
            hamburger--spin" type="button">
                <span class="hamburger-box">
                    <span class="hamburger-inner"></span>
                </span>
            </button>
            <div id = siteTitleWrapper>
                <h1 id ="siteTitle" class ="siteTitle">Almondo-Kaffee</h1>
            </div>
        </div>
        <div id= "mobilenavbar-wrapper" class="mobilenavbar-wrapper">
        <?php if(wp_is_mobile()){get_template_part("./template_parts/navbar_mobile",);
        }?>
    </div>

    <div class="mobilenavcontent">
    <div id = "headerTextPC">
    <h1 class="text-3xl"><a href="<?php echo home_url("/");?>"><?php 
    bloginfo("name")?></a></h1>
    <p><?php bloginfo("description")?></p>
    </div>
    </div>

</div>


</header>

navbar_mobile.php #

<nav>
<?php
$argsformobilenavbar=array (
"theme_location" => "nav_mobile",
'menu_class'=>'mobileNavUl',
);
wp_nav_menu($argsformobilenavbar);

?>
</nav>

functions.php中的脚本注册逻辑 #

function setDynamicFontHeight() { 
wp_register_script('setDynamicFontHeight','./wp-content/themes/almondotheme/template_parts/scripts/setDynamicFontHeight.js',null,false,true);

wp_enqueue_script('setDynamicFontHeight','./wp-content/themes/almondotheme/template_parts/scripts/setDynamicFontHeight.js',null,false,true);
}

add_action("wp_enqueue_scripts","setDynamicFontHeight",10,0);

实际导航栏结构 #

<nav>
    <div class="mobileNavUl">
        <ul>
            <li class="page_item page-item-2" style="visibility: visible; opacity: 1;">
                <a href="http://almondo/beispiel-seite/">Beispiel-Seite
                </a></li>
        </ul>
    </div>
</nav>

问题排查与修复方案 #

核心问题点 #

1. 选择器拼接错误：处理class类型的复合选择器（如mobileNavUl li）时，函数未自动添加.前缀，导致querySelectorAll找不到元素。
2. 运算符错误：else if(classOrID = "class")使用了赋值运算符=而非比较运算符==，导致逻辑分支错误。
3. 参考对象类型传错：调用setDynamicFontHeight("mobileNavUl li","siteTitle","class","class")时，siteTitle是id，第四个参数应该传id而非class。
4. 参考对象值类型不一致：当referenceObject为null时，referenceObjectSize被赋值为DOM元素，后续计算会出现NaN错误。

修复后的setDynamicFontHeight.js #

function setDynamicFontHeight(textToChange, referenceObject, classOrID, referenceObjectClassOrID) {
    let textToChangeElement;
    let referenceObjectSize;

    // 处理目标元素选择器
    switch (classOrID) {
        case "class":
            textToChangeElement = document.querySelector("." + textToChange);
            break;
        case "id":
            textToChangeElement = document.getElementById(textToChange);
            break;
        default:
            alert("请为第三个参数指定目标元素类型：id或class");
            return;
    }

    if (!textToChangeElement) {
        alert("未找到目标元素：" + textToChange);
        return;
    }

    const textParentElement = textToChangeElement.parentElement;

    // 处理参考对象高度
    if (referenceObject === null) {
        referenceObjectSize = textParentElement.offsetHeight;
    } else if (referenceObjectClassOrID === "class") {
        const refElement = document.querySelector("." + referenceObject);
        if (!refElement) {
            alert("未找到参考元素：" + referenceObject);
            return;
        }
        referenceObjectSize = refElement.offsetHeight;
    } else if (referenceObjectClassOrID === "id") {
        const refElement = document.getElementById(referenceObject);
        if (!refElement) {
            alert("未找到参考元素：" + referenceObject);
            return;
        }
        referenceObjectSize = refElement.offsetHeight;
    } else {
        alert("请按顺序传递参数：textToChange, referenceObject, classOrID, referenceObjectClassOrID");
        return;
    }

    // 计算vh单位字体高度
    const viewportHeight = window.innerHeight;
    const newFontHeightInVh = (referenceObjectSize / viewportHeight) * 100 * (4/3);

    // 设置字体大小
    if (classOrID === "id") {
        document.getElementById(textToChange).style.fontSize = `${newFontHeightInVh}vh`;
    } else if (classOrID === "class") {
        // 处理复合选择器，自动添加前缀
        const selector = textToChange.includes(" ") ? textToChange.replace(/^(\w+)/, ".$1") : "." + textToChange;
        const elements = document.querySelectorAll(selector);
        elements.forEach(element => {
            element.style.fontSize = `${newFontHeightInVh}vh`;
        });
    }
}

// 修复后的调用
setDynamicFontHeight("siteTitle", "hamburger-box", "id", "class");
setDynamicFontHeight("mobileNavUl li", "siteTitle", "class", "id");

内容的提问来源于stack exchange，提问作者Alwin Schneider