Можно ли удалить свойство CSS элемента с помощью JavaScript?
например У меня div.style.zoom = 1.2
,
теперь я хочу удалить свойство масштабирования с помощью JavaScript?
Как удалить свойство css с помощью 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)/) )