як видалити властивість css за допомогою javascript?

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

У вас є два варіанти:

ВАРІАНТ 1:

Можна скористатися методом removeProperty . Це видалить стиль з елемента.

el.style.removeProperty('zoom');

ВАРІАНТ 2:

Ви можете встановити його за замовчуванням:

el.style.zoom = "";

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

deleteProperty видалить стиль з елемента.

Приклад:

div.style.removeProperty ('масштабування');

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

div.style.removeProperty('zoom');

Ви можете використовувати об’єкт styleSheets:

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

Застереження №1: Ви повинні знати індекс свого таблиця стилів та індекс свого правила.

Caveat №2: Цей об’єкт реалізується непослідовно браузерами; те, що працює в одних, може не працювати в інших.

element.style.height = null;

вихід:

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

Ви можете спробувати знайти всі елементи, які мають цей клас, і встановити властивість "масштабування" на "нічого".

Якщо ви використовуєте бібліотеку JavaScript jQuery, ви можете це зробити $(".the_required_class").css("zoom","")

Редагувати: Видалено це твердження, оскільки виявилося неправдивим, на що вказувалося в коментарі та інших відповідях, що це справді можливо з 2010 року.

Неправильно: загальновідомий спосіб зміни таблиць стилів з JavaScript не існує.

Ви також можете це зробити в jQuery, сказавши $(selector).css("zoom", "")

Для цього слід зробити трюк - встановивши стиль вбудованої форми для нормального масштабування:

$ ('div'). attr ("стиль", "масштабування: нормальне;");

насправді, якщо ви вже знаєте властивість, це зробить ...

наприклад:

<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)/) )