Question

我正在尝试将一个div设置为一个div，将另一个div设置为阻止，以便一个消失，而另一个显示。但是当我运行代码时，它说：无法读取null的属性“样式”。我仍然是初学者，但我真的不知道自己在做什么错

function test(div1,div2)  
{  
    var= d1 = document.getElementById(div1);  
    var= d2 = document.getElementById(div2);  
    if( d2.style.display == "none" )  
   {  
    d1.style.display = "none";  
    d2.style.display = "block";  
   }  
    else  
   {  
    d1.style.display = "block";  
    d2.style.display = "none";  
   }  
}

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="js.js"></script>
    <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>

<div id= "div1"> 
    <h1>Hoi ik ben een div<h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div id= "div2">
    <h2>hoi ik ben 2e div<h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<button onclick="test()">click</button>

</body>
</html>

CSS

#div1{
    width: 70%;
    height: 70%;
    background-color: blue;
}
#div2{
    width: 80%;
    height: 80%;
    background-color: green;
    display: none;
}

Answer 1

调用功能为

test('div1','div2')

或更改

var= d1 = document.getElementById(div1);  
var= d2 = document.getElementById(div2);

对此

var d1 = document.getElementById('div1');  
var d2 = document.getElementById('div2');

无论哪种情况，都必须将var=更改为var。

Answer 2

function test()  
{  
    var d1 = document.getElementById("div1");  
    var d2 = document.getElementById("div2");  
    if( d2.style.display == "none" )  
   {  
    d1.style.display = "none";  
    d2.style.display = "block";  
   }  
    else  
   {  
    d1.style.display = "block";  
    d2.style.display = "none";  
   }  
}

仔细阅读错误消息后，在这里。

Answer 3

看看：

const toggleDiv = (div1,div2) => {  
  const d1 = document.getElementById(div1);  
  const d2 = document.getElementById(div2);  
  if( d2.style.display === "none" ){  
    d1.style.display = "none";  
    d2.style.display = "block";  
  }  
  else {  
    d1.style.display = "block";  
    d2.style.display = "none";  
  }  
}

#div1 {
  display: none;
}

<div id="div1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>

<div id="div2">Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</div>

<button onclick="toggleDiv('div1', 'div2')">Click to Toggole</button>

Answer 4

首先要介绍好话题。这不是您问题的答案，但是当我看到您的问题时，我在想什么是简单的问题解决方案。如果我会怎么办？这是我对这个问题的回答。

首先，我假设可以有多个选项可以切换，并且可以有多个组可以切换。这是html;

<div class="toggle-item first-active">
    item 1
</div>
<div class="toggle-item">
    item 2
</div>
<div class="toggle-item">
    item 3
</div>

<button type="button" onclick="toggleGroup('toggle-item')">Toggle Group 1</button>

<div class="toggle-item-other first-active">
    item 4
</div>
<div class="toggle-item-other">
    item 5
</div>
<div class="toggle-item-other">
    item 6
</div>

<button type="button" onclick="toggleGroup('toggle-item-other')">Toggle Group 2</button>

这是CSS代码

<style>
.toggle-item:not(.first-active),
.toggle-item-other:not(.first-active){
    display: none;
}
</style>

这是JavaScript代码：

<script>
var activeGroups = {}; //to keep active Indexes of groups

function toggleGroup(itemGroup){
    activeItemIndex = (activeGroups[itemGroup] || 0) + 1; //index +1
    var itemGroupElements = document.querySelectorAll('.' + itemGroup); //all group items
    activeItemIndex = activeItemIndex % itemGroupElements.length; //lets work forever
    for(var i=0; i < itemGroupElements.length; i++){
        itemGroupElements[i].style.display = i==activeItemIndex ? 'block' : 'none'; //hide items if not active index and show item active index
    }
    activeGroups[itemGroup] = activeItemIndex; //keep active item for next click
}
</script>

这就是我对相同问题的解决方案。祝你好运！

隐藏一个div并显示另一个

4 个答案: