显示/隐藏div点击JS和介绍

Question

我对前端Web开发领域相当陌生，我只研究了HTML/CSS约一个半月和约1周或更少的JS 。因为我想练习从不同网站学到的东西，所以我自己测试自己的知识。如果我问的问题太多，我想提前道歉，但是我没有人知道我可以分享编码问题。

所以我想（仅用于测试）一个显示/隐藏div，当你点击一个JS按钮时被激活。我可以让它显示，但我想试着用“if/else”功能来隐藏/显示它。我认为我的代码是正确的，但似乎没有工作，我找不到解决方案。我将与您分享我的代码（我实际遇到问题的那部分代码），如果能帮助我找到解决方案，我将非常感激。

HTML：

<button type="button" onclick="slide()" >Click Me</button> 
<div class="divtest" id="dropdown"> 
<span>If you are seeing this, then your JS worked! </span> 
</div> 

的CSS（有些东西是没有意义的，我只是说他们测试了一下）：

.divtest { 
position: absolute; 
left: 25%; 
bottom: 30px; 
width: 50%; 
height: 100px; 
border: 2px solid black; 
box-sizing: border-box; 
box-shadow: 5px 5px 10px 3px; 
text-align: center; 
padding: 40px; 
margin: 0 auto; 
font-family: Cooper, sans-serif; 
font-weight: 100;  
transition: 1s ease; 
background-color: limegreen; 
color: black; 
display: none; 
} 

button { 
position: absolute; 
width: 50%; 
left: 25%; 
bottom: 130px; 
padding: 10px; 
border: 2px solid black; 
background-color: limegreen; 
box-shadow: 5px 5px 50px 3px; 
color: black; 
cursor: pointer; 
font-family: Cooper, sans-serif; 
font-weight: 100; 

} 

的JS：

<script> 
function slide() { 
    var drop = document.getElementById("dropdown"); // declares the element with id="dropdown" as a var 
    var dropSetting = drop.style.display; // declares that the variable "drop"'s display property is also a variable 
    if (dropSetting == "none") { // if the current value of display = "none" (which it is as u can see in the CSS) 
     dropSetting == "block"; // Then set it to "block" 
    } 
    else {         // if the value of display != none 
     dropSetting == "none"; // then set it to "none" 
    } 
} 

</script> 

如果你有任何问题的代码或任何东西，请随时问，因为这是一个单独的功能，包含在我的测试网站，所以它是没有以任何方式连接到其他元素/属性。我以另一种方式首先尝试了这段代码（没有将dropSetting声明为var，只是在if/else函数中添加了几行），但它仍然无法工作。我不认为JS将“style.display”识别为一个属性，因为方括号不会突出显示它。提前感谢您的时间，我希望很快我也能够用我所知道的帮助一些人。

另外 - 一个侧面的问题 - 你对树屋有什么想法？我已经听到了很多关于他们的好消息，我正在考虑加入我的知识。

祝您有美好的一天！

Answer 1

从代码兼容性，尽量使用方法，没有捷径可走，为属性使用：

var drop = document.getElementById("dropdown"); 
drop.setAttribute('style', 'display: block'); 
var display = drop.getAttribute('display'); //Here is all the inline css, better do like below: 

而且它是非常的干净和更快的代码更好，使所有的CSS clases你需要：

.hide{ 
    display:none; 
} 

JS：

drop.classList.add('hide'); 
drop.classList.remove('hide'); 
drop.classList.toggle('hide'); 

从未使用过树，但我自己最好的老师是我们一个很好的IDE b类似VScode的原子，谷歌Chrome控制台（F12），而那些是你的书：

- http://www.w3schools.com/js/js_examples.asp

- https://developer.mozilla.org/en-US/docs/Web/API/Element

这是你的问题老师： stackoverflow.com

你不需要更多。

PD：你的逻辑是好的，只是不习惯编码快捷方式，它们可能不适用于所有环境。 （像elem.attribute而不是elem。getAttribute（''））

Answer 2

您的代码不起作用，因为您未将display属性分配给适当的值（block/none）。你已经使用了比较运算符（“==”）而不是equals（“=”）。

if (dropSetting == "none") { // if the current value of display = "none" (which it is as u can see in the CSS) 
    dropSetting = "block"; // Then set it to "block" 
} 
else {         // if the value of display != none 
    dropSetting = "none"; // then set it to "none" 
} 

您的代码中的“==”运算符只会返回true/false而不更改div的显示属性。

Answer 3

问题是你的dropSetting是而不是一个对象，就是字符串。当你改变它（如果改变）你不会改变对象（在这种情况下是风格）。尝试是这样的：

var drop = document.getElementById("dropdown"); //get reference to the object 
drop.style.display = drop.style.display == 'none' ? 'block' : 'none'; //if(...){do something}else{do something else} 

另一种可能性：

var dropStyle = document.getElementById("dropdown").style; 
if(dropStyle.display == 'none'){ 
    dropStyle.display = 'block'; 
}else 
    dropStyle.display = 'none';