Chrome - 样式显示在element.style中

Question

默认情况下，页面顶部有一个固定的工具栏，＆＃34;隐藏＆＃34;按钮。当用户单击隐藏按钮时，工具栏会隐藏。

当用户将鼠标悬停在页面顶部时，工具栏会显示为透明＆＃34;显示＆＃34;按钮。当用户点击＆＃34;显示＆＃34;时，工具栏会像以前一样显示。

我看到显示和隐藏是使用＆＃34; display：show / hide＆＃34;属性。但是我看到这个属性显示在＆＃34; element.style＆＃34;开发人员工具部分。这是否意味着使用样式/ .css（）方法在javascript / jQuery中注入样式？或者这意味着什么？

Answer 1

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

您经常要直接使用“元素样式”，因为它是具有最高priority的样式“锚点”：

1. Element.style

2. ID

3. 的.class

检查此示例：

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

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

HTML部分：

我们添加了两种组件。第一个是简单的“DIV”。它最初的风格是“display：block”。

第二个组件是一个按钮。如果单击它，我们执行“onClick（）”函数。

JS部分

只要执行“onClick（）”函数，我们就通过document.getElementById（“hello”）获取id为“hello”的div。现在我们可以将“显示”样式设置为“无”。无使元素消失（“display：none”）。

即使你通过jQuery的show/hide functions这样做，也只会产生“display：none / block”风格。