如何使用jQuery将“ style = display:” block”添加到元素?


Answers:


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

编辑:或者正如dave thieben在下面的评论中指出的那样,您也可以执行以下操作:

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

20
.css({ display: "block" });
戴夫·蒂本

8
@dave-或.css({ "display": "block" });只是短路由display变量引起的任何问题。-JSLint将拒绝不带引号的版本。(github.com/douglascrockford/JSLint/issues/110
彼得Ajtai

Json风格的分配对于将其发送到管道中很有用。我喜欢这个
Luis Robles

35

根据设置显示属性的目的,您可能需要看一下

$("#yourElementID").show()

$("#yourElementID").hide()

27

有许多功能可以执行此工作,这些功能根据优先级在底层编写。

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

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

显示匹配的元素,大致相当于调用.css("display", "block")

您可以使用显示元素.show()代替

$("div").show()

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

如果目标元素没有styleattribute,则可以使用此方法向元素添加内联样式。

$("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");

11

如果您需要添加多个,则可以这样做:

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

作为一种好习惯,我还将属性名称放在引号之间,以允许使用破折号,因为大多数样式中都带有破折号。如果它是“显示”,则引号是可选的,但如果有破折号,则没有引号将不起作用。无论如何,为了简单起见,请始终将其用引号引起来。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.