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

我想知道正在调用我的函数的onclick方法在第一次单击时不能访问样式值，但是在第二次单击时就可以访问。我想知道对于jQuery是否会相同，但似乎并非如此。

我创建了显示该问题的简短代码：

HTML：

Click to show panel

panel

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直接检索样式？