jQuery - 无法使用CSS动态更改textarea的高度！重要

Question

我正在尝试更改textarea的高度。 Zurb的基金会已经定义了5rem !important的高度。

现在，当我尝试使用jQuery改变我的身高时，它并没有改变。我试过了：

$('textarea').height('500px')
$('textarea').css('height', '500px', 'important);

没有任何作用。任何其他属性的CSS确实随.css()而变化。我该怎么办？

Answer 1

如果5rem !important设置为内联样式，那么它具有最高优先级，然后您无法通过任何CSS规则覆盖它。您必须更新内联样式。试试这个：

$('textarea').get(0).style.setProperty('height','200px','important');

来自MDN Docs

  

<强> CSSStyleDeclaration.setProperty（）

     

不归路。示例：styleObj.setProperty（'color'，'red'，'important'）

更新

请阅读此Answer: Apply !important CSS style using jQuery 你会在那里找到真正有用的信息..

快乐编码!!

Answer 2

$('textarea').attr('style', 'height: 500px !important');

Answer 3

<强> Demo

您可以使用css - 但它不支持Priority字段。

以下是正确的语法：

$('textarea').css('height','500px')

或者，如果您需要important，则可以使用内联样式或类。

Demo ：添加课程

.areaHeight{
    height : 500px !important;
}

$('textarea').addClass('areaHeight')

还有其他不太可行的选项： cssText

Answer 4

试试这个

<textarea id="textareaid"> </textarea>
$('#textareaid').css('height', '500px');

Answer 5

尝试使用其中任何一个来设置高度

Type:  1
 $("textareaid").height("600")

Type:  2
 $("textareaid").css("height","400px")

确保在创建dom元素后调用ur脚本