如何使用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（屬性）

.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'});

例如

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

jQuery .css()文檔參考