如何使用 jQuery 将 `style=display:"block"` 添加到元素中？

Posted 2023-02-22

【中文标题】如何使用 jQuery 将 `style=display:"block"` 添加到元素中？

【英文标题】：How to add `style=display:"block"` to an element using jQuery?

【发布时间】：2011-03-17 04:43:21

【问题描述】：

如何将style=display:"block"添加到jQuery中的元素？

【参考方案1】：

有多个函数可以完成这项工作，根据优先级写在底部。

.css()

为一组匹配的元素设置一个或多个 CSS 属性。

$("div").css("display", "block")

// Or add multiple CSS properties
$("div").css(
  display: "block",
  color: "red",
  ...
)

.show()

显示匹配的元素，大致是equivalent to calling .css("display", "block")

您可以改为使用.show() 显示元素

$("div").show()

.attr()

为一组匹配的元素设置一个或多个属性。

如果目标元素没有style属性，可以使用该方法为元素添加内联样式。

$("div").attr("style", "display:block")

// Or add multiple CSS properties
$("div").attr("style", "display:block; color:red")

javascript

如果您不想使用 jQuery，可以使用 纯 javascript 为元素添加特定的 CSS 属性。

var div = document.querySelector("div");
// One property
div.style.display = "block";
// Multiple properties
div.style.cssText = "display:block; color:red"; 
// Multiple properties
div.setAttribute("style", "display:block; color:red");

【参考方案2】：

如果你需要添加多个，那么你可以这样做：

$('#element').css(
    'margin-left': '5px',
    'margin-bottom': '-4px',
    //... and so on
);

作为一种好的做法，我还将属性名称放在引号之间以允许使用破折号，因为大多数样式中都有破折号。如果是“显示”，则引号是可选的，但如果您有破折号，则没有引号将无法工作。无论如何，为了简单起见：始终将它们括在引号中。

【参考方案3】：

根据设置显示属性的目的，你可能想看看

$("#yourElementID").show()

和

$("#yourElementID").hide()

【参考方案4】：

$("#YourElementID").css("display","block");

编辑： 或者正如 dave thieben 在下面的评论中指出的那样，您也可以这样做：

$("#YourElementID").css( display: "block" );

【讨论】：

或.css( display: "block" );

@dave - 或.css( "display": "block" ); 只是为了短路由display 变量引起的任何问题。 - JSLint 会拒绝没有引号的版本。 (github.com/douglascrockford/JSLint/issues/110)

Json-esque 分配对于将其发送到管道中很有用。我喜欢这个。