Как удалить свойство CSS с помощью JavaScript?

195

Можно ли удалить свойство CSS элемента с помощью JavaScript? например, у меня есть div.style.zoom = 1.2, теперь я хочу удалить свойство масштабирования через JavaScript?

javascript css

— Суббота
источник

3

Пожалуйста, уточните: вы пытаетесь удалить класс из какого-либо элемента или атрибут из какого-либо элемента?

— Ян Ханчич

1

Извините за это, а не за класс, атрибут для элемента.

— Сидел

почему понизить? это достаточно приличный вопрос нет?

— Роланд Буман

2

Привет сел, я не понимаю - почему вы отметили ответ наивистов как "принятый ответ"? Я имею в виду, что его решение хорошо, если вы хотите найти элементы по классам, но все в вашем вопросе указывает на то, что вы искали метод для изменения эффекта установки свойства локального стиля. Конечно, мой ответ лучше подходит к проблеме? Возможно, я неправильно понял ваш вопрос?

— Роланд Буман

1

@RolandBouman на самом деле принятый ответ должен быть изменен на ответ Эдвинаса Ильченко, потому что он отвечает на то, что спрашивали об удалении, а не на изменение по умолчанию. Ваш ответ по-прежнему имеет значение, поэтому я отредактировал его, чтобы уточнить различие.

— Whitneyland

187

У вас есть два варианта:

ОПЦИЯ 1:

Вы можете использовать метод removeProperty . Это удалит стиль из элемента.

el.style.removeProperty('zoom');

ВАРИАНТ 2:

Вы можете установить его на значение по умолчанию:

el.style.zoom = "";

Эффективный масштаб теперь будет таким, какой следует из определений, заданных в таблицах стилей (через теги ссылок и стилей). Таким образом, этот синтаксис будет изменять только локальный стиль этого элемента.

— Ролан Буман
источник

… Вместе с пользовательским CSS и стилями браузера по умолчанию.

— Квентин

Я понимал, что OP означает, что они хотели сделать это так, как будто они не установили свойство стиля элемента, которое именно то, что вы предоставили. Я пытался использовать el.style.removeProperty ('zoom'); (или «заполните», на самом деле, в моем случае), который, кажется, делает то же самое в IE, и игнорируется другими браузерами. По какой-то причине я был удивлен, обнаружив, что установка его в пустую строку имеет тот же эффект и, похоже, работает на всех (последних версиях) браузеров.

— Shavais

Это поведение указано в стандарте? Я не могу найти это :-(

— Оливер Джозеф Эш

@OliverJosephAsh да, это задокументировано, см. Этот ответ ниже stackoverflow.com/a/7901886/700206

— whitneyland

120

removeProperty удалит стиль из элемента.

Пример:

div.style.removeProperty ( 'увеличить');

Страница документации MDN:
CSSStyleDeclaration.removeProperty

— Эдвинас Ильченко
источник

25

div.style.removeProperty('zoom');

— Джо
источник

10

Вы можете использовать объект styleSheets:

document.styleSheets[0].cssRules[0].style.removeProperty("zoom");

Предупреждение # 1: Вы должны знать индекс вашей таблицы стилей и индекс вашего правила.

Предостережение № 2: этот объект реализован непоследовательно браузерами; то, что работает в одном, может не работать в других.

— james.garriss
источник

Это кажется действительно хрупким. Разве это не сломается, когда ваши показатели изменятся?

— Кейси Родармор

Ага. Это именно то, что говорит предостережение № 1.

— james.garriss

Мой Chrome 26 не имеет CSSStyleRule.prototype.removeProperty= (На самом деле CSSStyleRuleнет никаких методов. = (

— Rudie

CSSStyleSheet.prototype.removeRuleдля спасения.

— Руди

@ Руди, не так ли CSSStyleSheet.prototype.deleteRule?

— Рока

7

element.style.height = null;

вывод:

<div style="height:100px;"> 
// results: 
<div style="">

— T.Todua
источник

Кажется, что установка стиля на ноль не работает в IE11.

— MaximeW

1

Почему кто-то должен заботиться о IEбраузерах? Я намеренно игнорирую их уже годами.

— Т.Тодуа

4

Вы можете попробовать найти все элементы, которые имеют этот класс, и установить для свойства «zoom» значение «none».

Если вы используете библиотеку jQuery javascript, вы можете сделать это с $(".the_required_class").css("zoom","")

Редактировать: удалил это утверждение, поскольку оно оказалось неверным, как указано в комментарии и других ответах, это действительно было возможно с 2010 года.

Ложь: нет общеизвестного способа изменения таблиц стилей из JavaScript.

— naivists
источник

5

Да, есть. Модифицировать таблицы стилей программно, хотя JavaScript не сложно. Он работает в кросс-браузерном режиме с отличной производительностью и действительно имеет смысл при изменении одного свойства, которое должно быть одинаковым для нескольких элементов. Как и в январе 2010 года. Вот краткий пример: stackoverflow.com/questions/14927706/…

— Clox

Clox: конечно же, добавление таблиц стилей, которые переопределяют некоторые свойства. Модификация уже загруженных - не слышал об этом.

— наивисты

Это должно быть css (), а не attr (). Или это, возможно, attr () в IE?

— Алекс Кейс Смит

это должно быть на самом деле css, нет attr, вы правы.

— наивисты

1

Вы также можете сделать это в jQuery, сказав $(selector).css("zoom", "")

— TryingToImprove
источник

0

Это должно сделать трюк - установить встроенный стиль в нормальный для увеличения:

$ ('div'). attr ("style", "zoom: normal;");

— Matt
источник

1

Вопрос заключался в том, как удалить стиль. Этот ответ уничтожит все существующие стили и заменит их одной новой записью.

— Whitneyland

0

на самом деле, если вы уже знаете собственность, это сделает это ...

например:

<a href="test.html" style="color:white;zoom:1.2" id="MyLink"></a>

    var txt = "";
    txt = getStyle(InterTabLink);
    setStyle(InterTabLink, txt.replace("zoom\:1\.2\;","");

    function setStyle(element, styleText){
        if(element.style.setAttribute)
            element.style.setAttribute("cssText", styleText );
        else
            element.setAttribute("style", styleText );
    }

    /* getStyle function */
    function getStyle(element){
        var styleText = element.getAttribute('style');
        if(styleText == null)
            return "";
        if (typeof styleText == 'string') // !IE
            return styleText;
        else  // IE
            return styleText.cssText;
    }

Обратите внимание, что это работает только для встроенных стилей ... не стилей, которые вы указали в классе или что-то в этом роде ...

Другое примечание: вам может потребоваться экранировать некоторые символы в этом выражении замены, но вы поняли идею.

— MaxOvrdrv
источник

-3

Чтобы изменить все классы для элемента:

document.getElementById("ElementID").className = "CssClass";

Чтобы добавить дополнительный класс к элементу:

document.getElementById("ElementID").className += " CssClass";

Чтобы проверить, применяется ли класс к элементу:

if ( document.getElementById("ElementID").className.match(/(?:^|\s)CssClass(?!\S)/) )

— thejustv
источник

1

Вопрос был в том, как удалить стиль, этот ответ не имеет к этому никакого отношения.

— Whitneyland