Удалить стиль на элементе
Мне было интересно, возможно ли это.
Вот этот элемент
<div id="sample_id" style="width:100px; height:100px; color:red;">
Итак, я хочу удалить width: 100px; и height: 100px;
результат будет
<div id="sample_id" style="color:red;">
Любая помощь будет одобрена.:)
Ответы
Ответ 1
Вы можете редактировать стиль с чистым Javascript. Библиотека не нужна, поддерживается всеми браузерами, кроме IE, где вам нужно установить ''
вместо null
(см. Комментарии).
var element = document.getElementById('sample_id');
element.style.width = null;
element.style.height = null;
Для получения дополнительной информации вы можете обратиться к документации HTMLElement.style на MDN.
Ответ 2
var element = document.getElementById('sample_id');
element.style.removeProperty("width");
element.style.removeProperty("height");
Ответ 3
Обновление:. Для лучшего подхода обратитесь к ответу Blackus в тот же поток.
Если вы не прочь использовать JavaScript и Regex, вы можете использовать приведенное ниже решение, чтобы найти все свойства width
и height
в атрибуте style
и replace
им ничего.
//Get the value of style attribute based on element Id
var originalStyle = document.getElementById('sample_id').getAttribute('style');
var regex = new RegExp(/(width:|height:).+?(;[\s]?|$)/g);
//Replace matches with null
var modStyle = originalStyle.replace(regex, "");
//Set the modified style value to element using it Id
document.getElementById('sample_id').setAttribute('style', modStyle);
Ответ 4
Использовать javascript
Но это зависит от того, что вы пытаетесь сделать. Если вы просто хотите изменить высоту и ширину, я предлагаю следующее:
{
document.getElementById('sample_id').style.height = '150px';
document.getElementById('sample_id').style.width = '150px';
}
Чтобы полностью удалить его, удалите стиль, а затем снова установите цвет:
getElementById('sample_id').removeAttribute("style");
document.getElementById('sample_id').style.color = 'red';
Конечно, нет единственного оставшегося вопроса, на каком событии вы хотите, чтобы это произошло.
Ответ 5
$("#sample_id").css({ 'width' : '', 'height' : '' });
Ответ 6
Просто используйте это
$("#sample_id").css("width", "");
$("#sample_id").css("height", "");
Ответ 7
Задание авто для элементов ширины и высоты аналогично их техническому удалению. Используя ванильный Javascript:
images[i].style.height = "auto";
images[i].style.width = "auto";