如何使用jQuery更改css元素的样式

Question

我有以下代码：

  $('.signup-form-wrapper').css("style", "display: block");
                $('.login-form-wrapper').css("style", "display: none");

不确定为什么它不起作用。该元素目前看起来像这样：

 <div class="signup-form-wrapper form-wrapper" style="display: none;">

我正在尝试更改此样式以显示：块，我该怎么做？

Answer 1

您可以将代码更改为：

$('.signup-form-wrapper').show();

  

这大致相当于调用.css（'display'，'block'），除了   display属性恢复到最初的状态。

来源：http://api.jquery.com/show/

或

$('.signup-form-wrapper').css({ display: 'block' });

  

.css（properties）

     

.css（propertyName，value）

来源：http://api.jquery.com/css/#css-propertyName-value

两者都会显示您的元素并更改样式。

Answer 2

试试这个

$('.signup-form-wrapper').css("display", "block");
$('.login-form-wrapper').css("display", "none");

Answer 3

如果您只是想要展示和隐藏某些内容，那么有更短的功能，例如.hide()或.show()

Answer 4

.css()本身设置了元素的style。

函数调用语法为：

$(elem).css('style-property','style-value');

将您的代码更改为：

$('.signup-form-wrapper').css("display", "block");
$('.login-form-wrapper').css("display", "none");

或单个元素的多个样式传递对象：

$(elem).css({'style-property1':'style-value1','style-property2':'style-value2'});

E.g。

$('.signup-form-wrapper').css({"display": "block", "border":"1px solid red"});

JQuery .css() docs refererence