我正在尝试从我的 html 中的外部 javascript 文件调用 function，它更改了某些 div 的类，但它没有反应

Question

这是js文件

function changeClass(Id,Val){
    document.getElementById(Id).class = Val;
}

function show(){
    changeClass('resize','bS resize');
    changeClass('main','mS main');
    changeClass('sidebar','ad a sS sidebar');
    
    changeClass('title','b tS title');
    changeClass('topbar','bd b tpS topbar');
    changeClass('footer','bd b fS footer');
    
    document.getElementById('resize').onclick = 'hide()';
}

function hide(){
    changeClass('resize','bH resize');
    changeClass('main','mH main');
    changeClass('sidebar','ad a sH sidebar');
    
    changeClass('title','b tH title');
    changeClass('topbar','bd b tpH topbar');
    changeClass('footer','bd b fH footer');
    
    document.getElementById('resize').onclick = 'show()';
}

下面是 html 应该能够调用隐藏和显示函数的部分：

<!DOCTYPE html><html>
    
    <head>
        
        <meta charset = "utf8">
        <title> RVJade's comprehensive genetics </title>    

        
        <link rel = "stylesheet" href = "style.css">
        <link rel = "stylesheet" href = "styleColor.css">
        <link rel = "stylesheet" href = "hideshow.css">
        
        
        <script type = "text/javascript" src = "resize.js"> </script>
        
    </head>
    <body>
        
        <button type="button" class = "bS resize" id = "resize" onclick = "hide()">
            <img src = "out.png" class = "iS"></img>
            <img src = "in.png" class = "iH"></img>
        </button>...

它什么都不做，我试图将 js 脚本添加到 html 文件，但这也没有做任何事情

我希望它更改具有 ids 的 html 元素的类：resize、main、topbar、title 和 footer，因此样式发生变化，并更改按钮的 onclick 属性，因此它显示 function，所以当它再次单击时变化被逆转。

Answer 1

如果您要将数据集属性应用于您希望更改的每个元素，其中包含替代名称 css class 名称，则可以像这样轻松地在 styles 之间切换。

 // find all elements that have the data-altclass attribute let col=document.querySelectorAll('[data-altclass]'); // assign the click handler to the button let bttn=document.getElementById('resize'); bttn.addEventListener('click',e=>{ // iterate through the collection of elements found above // and toggle the class & data-altclass attributes col.forEach(n=>{ n.dataset.tmp=n.className; n.className=n.dataset.altclass; n.dataset.altclass=n.dataset.tmp; n.removeAttribute('data-tmp'); }); });

 /* CSS rules for illustration of effect only */.sS,.tpS,.tS,.bS,.fS{ color:red; }.tH,.mH,.bH,.fH,.mH{ color:blue } button{ border:2px solid black; padding:1rem; background:silver; }

 <div id='sidebar' class='ad a sS sidebar' data-altclass='ad a sH sidebar'>#SIDEBAR#</div> <div id='topbar' class='bd b tpS topbar' data-altclass='bd b tpH topbar'>#TOPBAR#</div> <h1 id='title' class='b tS title' data-altclass='b tH title'>#TITLE#</h1> <main id='main' class='mS main' data-altclass='mH main'> <button type="button" class="bS resize" id="resize" data-altclass='bH resize'> <img src="out.png" class="iS" /> <img src="in.png" class="iH" /> </button> </main> <footer id='footer' class='bd b fS footer' data-altclass='bd b fH footer'>#FOOTER#</footer>

我正在尝试从我的 html 中的外部 javascript 文件调用 function，它更改了某些 div 的类，但它没有反应

问题描述

1 个解决方案

解决方案1
0 2022-12-29 16:54:41

我正在尝试从我的 html 中的外部 javascript 文件调用 function，它更改了某些 div 的类，但它没有反应

问题描述

1 个解决方案

解决方案1 0 2022-12-29 16:54:41

解决方案1
0 2022-12-29 16:54:41