Chrome - styling在element.style中显示

Question

默认情况下，页面顶部有一个固定的工具栏，带有“隐藏”按钮。当用户单击“隐藏”按钮时，工具栏将隐藏。

当用户将鼠标悬停在页面顶部时，工具栏会透明地显示“显示”按钮。当用户点击"show“时，工具栏就会像以前一样出现。

我看到显示和隐藏是使用"display: show / hide“属性来完成的。但是我看到这个属性显示在开发者工具的"element.style“部分。这是否意味着样式是使用style/.css()方法注入到javascript/jQuery中的？或者这还意味着什么呢？

Answer 1

不，这最有可能是通过HTML Element style实现的。

您通常希望直接使用“元素样式”，因为它是具有最高priority的样式“锚”

1. Element.style
2. id

1. .class

检查此示例：

​

function onClick(){
  document.getElementById("hello").style.display =     "None";
}

<div id="hello">Hello World!</div>
<button onclick="onClick()">Click Me</button>

​

超文本标记语言部分：

我们添加了两种组件。第一个是简单的"DIV“。它最初的样式是"display: block“。

第二个组件是一个按钮。如果我们点击函数"onClick()“，我们就会执行它。

JS部分

一旦执行了"onClick()“函数，我们就会通过document.getElementById( "hello”)获得id为“hello”的div。现在我们可以将"display“样式设置为"None”。None使元素消失("display: none")。

即使你通过jQuery的show/hide functions来做这件事，它也只会导致"display: none/block“风格。