css 无法使用JS [duplicate]从HTML中删除属性

rqqzpn5f 于 2022-11-26 发布在其他

关注(0)|答案(2)|浏览(110)

此问题在此处已有答案：

What do querySelectorAll and getElementsBy* methods return?（12个答案）
昨天关门了。
尝试创建一个响应式侧边栏，我希望一些东西在关闭时隐藏，打开时显示。我尝试用get，set和remove属性来做，但是不起作用。标签已经有隐藏属性了。

const menu = document.querySelector(".menu");
const sidebar = document.querySelector(".sidebar");
const hidden = document.querySelectorAll(".hiddens");

menu.addEventListener("click", sidebarWidth)

function sidebarWidth(){
    if(sidebar.style["width"] == "5.5vw"){
        sidebar.style["width"] = "18vw";
        show();
    } else {
        sidebar.style["width"] = "5.5vw";
        hide();
    }
}

function show(){
    hidden.getAttribute("hidden");
    hidden.removeAttribute("hidden");
}

function hide(){
    hidden.setAttribute("hidden");
}

尝试在sidebarWidth函数中使用set，get和remove属性，尝试为他们创建另一个事件，尝试现在的方式，都不起作用。

css

来源：https://stackoverflow.com/questions/74567593/cant-remove-attributes-from-html-with-js

2条答案

按热度按时间

hpxqektj1#

检查setAttribute的API，我们会发现它需要两个参数，您缺少第二个参数来设置它的true或false

另外，由于hidden是从document.querySelectorAll得到的，它是一个数组，所以不能直接调用setAttribute，我们需要一个一个地迭代
因此更改为以下代码

function show(){
    for(let i=0;i<hidden.length;i++){
         hidden[i].setAttribute("hidden",true);
    }
}

function hide(){
    for(let i=0;i<hidden.length;i++){
         hidden[i].setAttribute("hidden",false);
    }
}

赞(0）回复(0）举报 2022-11-26

n8ghc7c12#

首先，可以使用HTML元素的hidden属性。
此外，queryselectorAll(".hiddens")函数会传回.hiddens类别中所有元素的数组。
需要像这样循环遍历它们：

const hidden = document.querySelectorAll(".hiddens");

function show(){
  for(let i of hidden){
    i.hidden= false
  }
}

function hide(){
  for(let i of hidden){
    i.hidden= true
  }
}

赞(0）回复(0）举报 2022-11-26

我来回答

css 无法使用JS [duplicate]从HTML中删除属性

2条答案

相关问题

热门标签

最新问答