wordpress 为什么element.style.FontSize不适用于那些被迭代的类，而这些类之前被保存在一个用querySelectorAll创建的数组中？

亲爱的Stackoverflow社区，今天我有一个关于javascript和WordPress的问题：我有一个名为setDynamicFontHeight.js的js脚本，一个名为header.php的php文档，一个名为navbar_mobile. php的php文档，它只执行wp_nav_menu（参数）和通过我的wordpress主题中的functions.php查询函数。参数只是导航栏的位置和导航栏的 Package 类。在setDynamicFontHeight.js中，我认为问题出在 //set font height 注解之后。通过functions.php正确查询脚本（警报工作）和header.php只是一些WordPress的功能标记.我想要的js函数setDynamicFontHeight（args）要做的是它应该改变一个特定的文本高度到一个引用对象的高度.文本和引用对象可以被类或id调用.请注意，该函数在名为SiteTitle的文本上工作得很好，但在queryselector mobileNavUl li 上不工作。我认为问题出在查询选择器或处理qs生成的数组的循环上。它们如下所示：

设置动态字体高度.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

标题.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>

移动导航栏.php

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

?>
</nav>

和查询函数.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>

wordpress 为什么element.style.FontSize不适用于那些被迭代的类，而这些类之前被保存在一个用querySelectorAll创建的数组中？

1条答案

相关问题

热门标签

最新问答