Додавання та видалення атрибуту стилю з div із jquery

103

Я успадкував проект, над яким працюю, і я оновлюю деякі анімації jquery (дуже мало практики з jquery).

У мене є div, з якого потрібно додати та видалити атрибут стилю. Ось розділ:

<div id='voltaic_holder'>

У один момент анімації мені потрібно додати до неї стиль:

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

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

Дякую,

jquery css dhtml

— ЇїЗаголошено
джерело

$('voltaic_holder').style = nullможливо? Стилі мають власне ціле дерево об'єктів. більшість інших атрибутів - це лише ключ = значення типу даних.

— Марк Б

246

Ви можете зробити будь-що з наступного

Встановіть кожну властивість стилю окремо:

$("#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")

— Адам Альбрехт
джерело

Чи можна додати більше 1 css властивості за рядок? Або я повинен зробити по одному для кожного властивості стилю так: $("#voltaic_holder").css("position", "relative"); $("#voltaic_holder").css("top", "-75");

— ЇїПроголошено

3

Відповісти на це так, ви можете. Просто використовуйте літерал об'єкта у функції .css (). Як $ ('foo'). Css ({'height': '30px', 'width': '50px'});

— Річард Ніл Ілаган

@AdamAlbrecht Як я можу видалити певний стиль, який я додав, оскільки в $ ("# voltaic_holder"). DeleteAttr ("стиль") він видаляє весь застосований стиль, який за замовчуванням був нещодавно доданий.

— 3 правила

21

Щоб повністю видалити атрибут стилю 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", "");

— Пітер Олсон
джерело

15

Якщо ви використовуєте jQuery, використовуйте css, щоб додати CSS

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

Щоб видалити атрибути CSS

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

— justkt
джерело

Ви не можете видалити позицію чи верхній атрибут з елемента voltaic_holder, оскільки він не має атрибутів thos. Це властивості css, визначені в атрибуті style.

— Пітер Олсон

@Peter - так! Відредаговано для використання.css

— justkt

10

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

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

або навіть

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

— Сюрреалістичні мрії
джерело

2

Anwer is here Як динамічно додати стиль вирівнювання тексту за допомогою jQuery

— Кінь
джерело

2

У випадку .css методу в jQuery для ! Важливо правило не застосовується.

У цьому випадку ми повинні використовувати функцію .attr .

Наприклад: Якщо ви хочете додати стиль, як показано нижче:

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

Ви повинні використовувати:

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

Сподіваюся, це допоможе комусь.

— Адія Тадікамалла
джерело

1

Видаліть атрибут стилю з div за допомогою J запиту:

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

Додайте стиль до розділу за допомогою J-запиту:

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

Додайте стиль за допомогою html:

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

Сподіваюся, це стане в нагоді :)

— Вадід хан
джерело