删除元素上的样式

Question

我想知道这是否可行.

有这个元素

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

所以我想删除宽度: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和height属性，style而replace它们什么也没有。

//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

您可以简单地将样式设置为 [ unset ]，它会强制 CSS 假装样式从未分配给给定元素。

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

element.style.width = "unset";
element.style.height = "unset";