使用 jquery 从 div 添加和删除样式属性

Adding and removing style attribute from div with jquery

提问by ItsPronounced

I've inherited a project I'm working on and I'm updating some jquery animations (very little practice with jquery).

我继承了我正在处理的一个项目，并且正在更新一些 jquery 动画（很少使用 jquery 练习）。

I have a div I need to add and remove the style attribute from. Here is the div:

我有一个 div，我需要从中添加和删除 style 属性。这是div：

<div id='voltaic_holder'>

At one point in the animation I need to add a style to it:

在动画中的某个时刻，我需要为其添加样式：

<div id='voltaic_holder' style='position:absolute;top:-75px'>

I've searched around and found the .removeAttr()method but I can't see how to add it, or even remote parts of it (like the top:-75px only).

我四处搜索并找到了该.removeAttr()方法，但我看不到如何添加它，甚至看不到它的远程部分（例如仅顶部：-75px）。

Thanks,

谢谢，

回答by Adam Albrecht

You could do any of the following

您可以执行以下任何操作

Set each style property individually:

单独设置每个样式属性：

$("#voltaic_holder").css("position", "relative");

Set multiple style properties at once:

一次设置多个样式属性：

$("#voltaic_holder").css({"position":"relative", "top":"-75px"});

Remove a specific style:

删除特定样式：

$("#voltaic_holder").css({"top": ""});
// or
$("#voltaic_holder").css("top", "");

Remove the entire style attribute:

删除整个样式属性：

$("#voltaic_holder").removeAttr("style")

回答by Peter Olson

To completely remove the style attribute of the voltaic_holderspan, do this:

要完全删除voltaic_holderspan的 style 属性，请执行以下操作：

$("#voltaic_holder").removeAttr("style");

To add an attribute, do this:

要添加属性，请执行以下操作：

$("#voltaic_holder").attr("attribute you want to add", "value you want to assign to attribute");

To remove only the top style, do this:

要仅删除顶部样式，请执行以下操作：

$("#voltaic_holder").css("top", "");

回答by justkt

If you are using jQuery, use cssto add CSS

如果您使用的是 jQuery，请使用css添加 CSS

$("#voltaic_holder").css({'position': 'absolute',
    'top': '-75px'});

To remove CSS attributes

删除 CSS 属性

$("#voltaic_holder").css({'position': '',
    'top': ''});

回答by Surreal Dreams

The easy way to handle this (and best HTML solution to boot) is to set up classes that have the styles you want to use. Then it's a simple matter of using addClass()and removeClass(), or even toggleClass().

处理这个问题的简单方法（以及最好的 HTML 启动解决方案）是设置具有您想要使用的样式的类。然后使用addClass()和removeClass()甚至toggleClass()就很简单了。

$('#voltaic_holder').addClass('shiny').removeClass('dull');

or even

甚至

$('#voltaic_holder').toggleClass('shiny dull');

回答by TheHorse

Anwer is here How to dynamically add a style for text-align using jQuery

答案在这里 如何使用 jQuery 动态添加文本对齐样式

回答by Adiyya Tadikamalla

In case of .cssmethod in jQuery for !importantrule will not apply.

如果jQuery 中的.css方法用于!important规则将不适用。

In this case we should use .attrfunction.

在这种情况下，我们应该使用.attr函数。

For Example: If you want to add style as below:

<div id='voltaic_holder' style='position:absolute;top:-75px !important'>

例如：如果您想添加如下样式：

<div id='voltaic_holder' style='position:absolute;top:-75px !important'>

You should use:

$("#voltaic_holder").attr("style", "position:absolute;top:-75px !important");

你应该使用：

$("#voltaic_holder").attr("style", "position:absolute;top:-75px !important");

Hope it helps some one.

希望它可以帮助某人。

回答by Wajid khan

Remove style attribute from div using J query:

使用 J 查询从 div 中删除样式属性：

$("#TableDiv").removeAttr("style");

Add style to div using J query:

使用 J 查询向 div 添加样式：

$("#TableDiv").attr("style", "display: none;");

Add style using html:

使用 html 添加样式：

<div class="row" id="TableDiv" style="display: none;">
</div>

Hope it will helpful :)

希望它会有所帮助:)