javascript - 删除元素上的样式

Question

我想知道这是否可能。

有这个元素

<div id="sample_id" style="width:100px; height:100px; color:red;">

所以我想删除width:100px; 和高度：100px；

结果是

<div id="sample_id" style="color:red;">

任何帮助将不胜感激。:)

Answer 1

您可以使用纯 Javascript 编辑样式。不需要库，除 IE 之外的所有浏览器都支持，您需要设置为''而不是null（请参阅注释）。

var element = document.getElementById('sample_id');

element.style.width = null;
element.style.height = null;

有关更多信息，您可以参考 MDN 上的HTMLElement.style文档。

Answer 2

var element = document.getElementById('sample_id');
element.style.removeProperty("width");
element.style.removeProperty("height");

Answer 3

使用 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';

当然，剩下的唯一问题是您希望这发生在哪个事件上。

Answer 4

更新：如需更好的方法，请参阅 Blackus 在同一线程中的回答。

---

如果您不反对使用 JavaScript 和 Regex，您可以使用以下解决方案来查找属性中的所有width和属性，而它们一无所有。heightstylereplace

//Get the value of style attribute based on element's 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's Id
document.getElementById('sample_id').setAttribute('style', modStyle); 

Answer 5

$("#sample_id").css({ 'width' : '', 'height' : '' });

Answer 6

从技术上讲，在宽度和高度元素上指定 auto 与删除它们相同。使用香草 Javascript：

images[i].style.height = "auto";
images[i].style.width = "auto";

Answer 7

就这样使用

 $("#sample_id").css("width", "");
 $("#sample_id").css("height", "");