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

Question

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

Answer 1

Как правило, вы не можете удалить свойства из встроенных объектов, подобных этому, и, конечно, не в IE (атрибут масштабирования объекта стиля является расширением IE)

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

el.style.zoom = "";

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

Таким образом, этот синтаксис будет изменять только локальный стиль этого элемента.

Answer 2

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

Пример:

div.style.removeProperty ( 'зум');

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

Answer 3

div.style.removeProperty('zoom');

Answer 4

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

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

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

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

Answer 5

element.style.height = null;

выход:

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

Answer 6

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

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

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

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

Answer 7

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

Answer 8

Это работает для меня .... Он переопределяет стили CSS, не удаляя.

Попробуй ..

$(document).ready(function(){
    var bugfix = document.createElement('style')
    bugfix.innerHTML = "body {overflow-x: hidden !important;}";
    document.body.appendChild(bugfix);
  });

Answer 9

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

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

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

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

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

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

Answer 10

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

например:

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

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

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