JQuery - 显示/隐藏样式属性覆盖 css答案

【问题标题】：JQuery - show/hide style attribute overriding cssJQuery - 显示/隐藏样式属性覆盖 css
【发布时间】：2014-11-05 10:23:30
【问题描述】：

我了解 CSS 的工作原理，因为最接近元素的样式会覆盖任何以前的样式。我的问题是，当<div> 标签中定义了样式属性时，JQuery 函数show() 和hide() 是如何操作的：

<div class='menuTab' style="display:block">

为了这个例子，假设 css 是这样的：

div.menuTab{
    /* ..other css...*/
    display:none
}

应用函数$('div.menuTab').hide() 是否会将menuTab HTML 的样式属性更改为display:none？

【问题讨论】：

所以只是检查一下：hide() 和 show() 通过将样式属性插入到带有display:none 或display:block（或之前的显示类型）的 HTML 元素中来工作吗？它们不直接使用外部 CSS 文件。

标签： javascript jquery html css

【解决方案1】：

简而言之：是的。

.hide() 是以下的简写：

.css("display","none");

因此它将用display:hidden 覆盖您的display:block 内联样式。

除非使用 !important，否则内联样式会覆盖 CSS。

【讨论】：

显示：无或可见性：隐藏
@mplungjan 干杯 - display:none.

【解决方案2】：

是的。

$('div.menuTab').hide() 将导致style="display:none"

【讨论】：

【解决方案3】：

是的，

它将隐藏类并覆盖其属性。

.hide()

是以下的简写：

.css("display","none");

它将覆盖

 .css("display","block");

正如您在 chrome 的检查元素中看到的那样

【讨论】：

【解决方案4】：

如果你使用$('div.menuTab').hide();，js 会改变 html 中的样式，字面意思是display:none;

这里有一个例子。可以看到.hide() 函数将显示从block 更改为none。

http://jsfiddle.net/2tfuxzq5/3/

希望对你有帮助！

【讨论】：

【解决方案5】：

您可以通过查看jQuery source（搜索：function showHide）轻松找到.hide() 的工作原理。

jQuery .hide() 和 .show() 是 jQuery.css() 的包装器，它们根据元素的类型更改元素的 style.display 属性（.hide() 到 display = 'none' 和 .show() 到 'inline'、'block' 等） .

【讨论】：