如何设置“style=display:none;”使用 jQuery 的 attr 方法？

Posted 2023-02-24

【中文标题】如何设置“style=display:none;”使用 jQuery 的 attr 方法？

【英文标题】：How to set "style=display:none;" using jQuery's attr method?

【发布时间】：2015-03-06 22:21:06

【问题描述】：

以下是我想要应用 style="display:none" 属性的 id msform 的表单。

<form id="msform" style="display:none;">
</form>

还应在添加"style=display:none;" 属性之前执行检查。也就是说，如果它已经像上面的代码一样设置，则不应再次设置。

但如果它没有设置，那么它应该。

我应该如何做到这一点？请帮帮我。

【问题讨论】：

你为什么要完全删除样式？（在下面的评论中提到）。我将不得不查看您的其余代码/html，但更改样式通常是比这样做更好的选择。如果您想提供更多详细信息，您可能会得到更有用的答案:)

【参考方案1】：

为什么不直接使用$('#msform').hide()？在幕后 jQuery 的 hide 和 show 只需设置 display: none 或 display: block。

hide() 如果已经隐藏，则不会改变样式。

根据下面的评论，您将删除所有带有removeAttr("style") 的样式，在这种情况下，请立即调用hide()。

例如

$("#msform").removeAttr("style").hide();

这个反面当然是show()

$("#msform").show();

或者，更有趣的是，toggle()，它会根据当前状态在hide() 和show() 之间有效地翻转。

【讨论】：

我尝试使用它，但后来我有一个删除样式属性的代码 $("#msform").removeAttr("style");所以我想设置 style="display:none;"。怎么办？

再次...只需在removeAttr("style") 之后调用hide()

有什么方法可以使用.hide() 和.before()，基本上我想添加一个隐藏元素——jsfiddle.net/95jeL9xc/2

【参考方案2】：

作为其他答案中提到的hide() 的替代方法，您可以使用css() 明确设置display 值：

$("#msform").css("display","none")

【讨论】：

使用 21 个字符而不是“hide()”的 6 个字符是我唯一的反对意见（毕竟这是针对网页）:)

是的，我知道您正在尝试提供替代方案，但是如果您被击败了一个更简单的答案，那么没有真正的理由来回答更长的答案。

@jmore009 Idk，从某种意义上说，这更直接地回答了原始问题。使用hide 和show 是否更传统，并且可能是更好的路线？是的，海事组织。但是，如果您真的想更改附加到display 的字符串，这就是howie doit。 /耸肩

【参考方案3】：

$(document).ready(function()
var display =  $("#msform").css("display");
    if(display!="none")
    
        $("#msform").attr("style", "display:none");
    
);

【讨论】：

请在您的回答中添加一些解释。

【参考方案4】：

您可以使用 jquery 的hide 和show 函数。 Examples

在您的情况下，只需设置 $('#msform').hide() 或 $('#msform').show()

【参考方案5】：

根据评论，我们正在从样式属性中删除一个属性。

这里没有影响，但是在样式中使用更多属性时会很有帮助。

$('#msform').css('display', '')

之后我们使用

$("#msform").show();

【参考方案6】：

您可以使用：$("#msform").hide()。这会将元素设置为display: none

【参考方案7】：

您可以使用 jquery attr() method 来实现 teh 属性的设置和方法 removeAttr() 删除您的元素 msform 的属性 如代码所示

$('#msform').attr('style', 'display:none;');


$('#msform').removeAttr('style');

【参考方案8】：

请尝试以下代码：

$('#msform').fadeOut(50);

$('#msform').fadeIn(50);