为什么document.getElementById.style和$ .css的行为不同

时间:2018-12-12 14:45:17

标签: javascript jquery

我想知道正在调用我的函数的onclick方法在第一次单击时不能访问样式值,但是在第二次单击时就可以访问。我想知道对于jQuery是否会相同,但似乎并非如此。 我创建了显示该问题的简短代码:

HTML:

<p class="flip" onclick="myFunction()">Click to show panel</p>

<div id="panel">
  <p>panel</p>

</div>

CSS:

#panel, .flip {
  font-size: 16px;
  padding: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  border: solid 1px #a6d8a8;
  margin: auto;
}

.flip {
    cursor: pointer;
}

#panel {
  display: none;
}

脚本:

function myFunction() {
  console.log(document.getElementById("panel").style.display); //on first call returns empty string
  console.log($("#panel").css("display")); // on first call returns none
  const setPanel = (a) => {document.getElementById("panel").style.display = a;};
  const getPanel = document.getElementById("panel").style.display;
    (getPanel === "none") ? setPanel("block") : setPanel("none");
}

我想知道为什么行为是这样,是否有可能不使用jQuery直接检索样式?

1 个答案:

答案 0 :(得分:0)

jQuery内部使用.getComputedStyle()来确定元素上的有效样式,而不是该元素上显式定义的样式。 .style仅返回显式的。

观察:

function myFunction() {
  console.log(window.getComputedStyle(document.getElementById("panel")).display); //on first call returns none
  console.log($("#panel").css("display")); // on first call returns none
  const setPanel = (a) => {document.getElementById("panel").style.display = a;};
  const getPanel = window.getComputedStyle(document.getElementById("panel")).display;
    (getPanel === "none") ? setPanel("block") : setPanel("none");
}
#panel, .flip {
  font-size: 16px;
  padding: 10px;
  text-align: center;
  background-color: #4CAF50;
  color: white;
  border: solid 1px #a6d8a8;
  margin: auto;
}

.flip {
    cursor: pointer;
}

#panel {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="flip" onclick="myFunction()">Click to show panel</p>

<div id="panel">
  <p>panel</p>

</div>