Я хочу сделать отображение элемента при нажатии кнопки. по умолчанию элемент показан, как мне сделать так, чтобы он не отображал ни одного по умолчанию? - PullRequest
Новая
       72

Я хочу сделать отображение элемента при нажатии кнопки. по умолчанию элемент показан, как мне сделать так, чтобы он не отображал ни одного по умолчанию?

1 голос
/ 23 марта 2019

Все, что касается кнопки, кажется правильным и работает в обратном направлении, что я хочу в данный момент.когда я загружаю страницу, появляется div: myDIV, и кнопка переключает его, исчезая и появляясь снова.Как мне сделать myDIV нет по умолчанию, но все еще имеет функцию кнопки как переключатель 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
  display:none;
}
</style>
</head>
<body>


<button onclick="myFunction()">test</button>

<div id="myDIV">
This is my DIV element.
</div>



<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 23 марта 2019

Сначала вам нужно получить значение CSS, чтобы переключать отображаемое значение кнопкой в ​​JS.По умолчанию рекомендуется не использовать встроенный стиль в HTML.

function myFunction() {
	const cont = document.querySelector("#chartContainer");
	const styles = getComputedStyle(cont)
  const displayStyle = styles.display;
  if(displayStyle === "none"){
  	cont.style.display = "block";
  }else {
  	cont.style.display = "none";
  }
  
}

const BTN = document.querySelector("button");
BTN.addEventListener('click', myFunction);
.container {
  background-color: #FFF;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
}

#chartContainer {
  background-color: blue;
  border-radius: 25px;
  height: 200px;
  width: 100%;
  float: below;
  display: none;
}

button {
  width: 50px;
  height: 50px;
}
<div class="container">
    <button>toggle</button>
    <div id="chartContainer">
    </div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js">	</script>
</div>
0 голосов
/ 23 марта 2019

Я думаю, что дело здесь style.display = '' на самом деле

Когда вы используете style.display, чтобы получить состояние отображения, он не может получить атрибут отображения, определенный в CSS

...