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

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

Ответ 1

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

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

el.style.zoom = "";

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

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

Ответ 2

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

Пример:

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

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

Ответ 3

div.style.removeProperty('zoom');

Ответ 4

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

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

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

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

Ответ 5

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

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

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

element.style.height = null;

выход:

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

Ответ 9

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

например:

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

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

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

Ответ 10

Используя jquery (http://jquery.com), можно полностью удалить атрибут из элемента:

$('div#idOfDiv').removeAttr('class');

Просто включите источник jquery, прежде чем запускать эту строку кода. Кроме того, лучше всего делать такие вещи после того, как документ полностью загружен, делая эту точную строку:

$(document).ready(function() {
    $('div#idOfDiv').removeAttr('class');
});

которые также должны быть включены после включения источника jquery.

Ответ 11

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

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

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

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

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

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