Добавление и удаление атрибута стиля из div с помощью jquery

Я унаследовал проект, над которым работаю, и обновляю некоторые анимации jquery (очень мало практики с jquery).

У меня есть div, из которого мне нужно добавить и удалить атрибут стиля. Вот div:

<div id='voltaic_holder'>

В какой-то момент анимации мне нужно добавить к ней стиль:

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

Я поискал и нашел метод .removeAttr(), но не вижу, как его добавить или даже удаленные части (например, верх: только -75 пикселей).

Спасибо,


person ItsPronounced    schedule 22.03.2011    source источник
comment
$('voltaic_holder').style = null возможно? У стилей есть собственное целое дерево объектов. большинство других атрибутов - это просто данные типа ключ = значение.   -  person Marc B    schedule 22.03.2011


Ответы (7)


Вы можете сделать любое из следующих действий

Настройте каждое свойство стиля индивидуально:

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

Установите сразу несколько свойств стиля:

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

Удалить определенный стиль:

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

Удалите весь атрибут стиля:

$("#voltaic_holder").removeAttr("style")
person Adam Albrecht    schedule 22.03.2011
comment
Могу ли я добавить более 1 свойства css на строку? Или мне нужно сделать по одному для каждого свойства стиля, например: $("#voltaic_holder").css("position", "relative"); $("#voltaic_holder").css("top", "-75"); - person ItsPronounced; 22.03.2011
comment
Чтобы ответить на этот вопрос, да, вы можете. Просто используйте литерал объекта в функции .css (). Как $ ('foo'). Css ({'height': '30px', 'width': '50px'}); - person Richard Neil Ilagan; 22.03.2011
comment
@AdamAlbrecht Как я могу удалить определенный стиль, который я добавил, потому что в $ (# voltaic_holder) .removeAttr (style) он удаляет все примененные стили, которые были по умолчанию только что добавленными. - person 3 rules; 13.07.2016

Чтобы полностью удалить атрибут стиля диапазона voltaic_holder, сделайте следующее:

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

Чтобы добавить атрибут, сделайте следующее:

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

Чтобы удалить только верхний стиль, сделайте следующее:

$("#voltaic_holder").css("top", "");
person Peter Olson    schedule 22.03.2011

Если вы используете jQuery, используйте css, чтобы добавить CSS.

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

Чтобы удалить атрибуты CSS

$("#voltaic_holder").css({'position': '',
    'top': ''});
person justkt    schedule 22.03.2011
comment
Вы не можете удалить атрибут position или top из элемента voltaic_holder, потому что он не имеет атрибутов thos. Это свойства css, определенные в атрибуте style. - person Peter Olson; 22.03.2011
comment
@ Питер - ох! Отредактировано для использования .css - person justkt; 22.03.2011

Самый простой способ справиться с этим (и лучшее решение HTML для загрузки) - настроить классы, которые имеют стили, которые вы хотите использовать. Тогда остается просто использовать addClass () и removeClass () или даже toggleClass ().

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

или даже

$('#voltaic_holder').toggleClass('shiny dull');
person Surreal Dreams    schedule 22.03.2011

В случае использования метода .css в jQuery для ! Important правило не применяется.

В этом случае мы должны использовать функцию .attr.

Например: если вы хотите добавить стиль, как показано ниже:

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

Вы должны использовать:

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

Надеюсь, это кому-то поможет.

person Adiyya Tadikamalla    schedule 13.12.2018


Удалите атрибут стиля из div с помощью J-запроса:

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

Добавить стиль в div с помощью J-запроса:

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

Добавить стиль с помощью html:

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

Надеюсь, это поможет :)

person Wajid khan    schedule 24.09.2018