Удалить стиль на элементе

Мне было интересно, возможно ли это.

Вот этот элемент

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