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

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

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

ОПЦИЯ 1:

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

el.style.removeProperty('zoom');

ВАРИАНТ 2:

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

el.style.zoom = "";

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

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

Пример:

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

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

div.style.removeProperty('zoom');

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

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

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

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

element.style.height = null;

вывод:

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

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

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

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

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

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

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

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

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

например:

<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;
    } 

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

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

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

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

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

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

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

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