禁用内联css样式[重复]

Question

当我使用 IE 开发工具检查 html 时，我发现按钮有一种内联样式：

我不想要这个输入元素的任何width 属性。如何用空的width 禁用或覆盖它？

Answer 1

如果您想覆盖内联样式，则需要在样式表中添加样式!important

例如

width: auto !important;

参考 - CSS Specificity

Answer 2

您可以使用 JavaScript 禁用任何给定元素的内联样式：

1. 在 HTML 文档中找到按钮
2. 移除按钮的style属性

var button = document.getElementById('myButton');
button.removeAttribute('style');

Answer 3

2022 年以上更新

如果现在其他人偶然发现了这一点，您可以做的不仅仅是使用 JavaScript 删除内联 HTML 样式标签。您可以保留标签以备日后退回。有两种方法可以做到！

一种方式：“禁用”HTML 属性

我听说在 HTML 标记上使用 disabled 会阻止浏览器处理它。但我很难让它在 Firefox 上运行。也许有人可以启发我！

<style class='style-class' disabled>
  body { color: blue; }
</style>

所以你只需要

$('.style-class').prop('disabled', true)

另一种方式：改变标签本身

您的浏览器只会解析样式标签中的样式。因此，如果您将标签更改为其他任何内容，您仍然可以在 DOM 中检查它，但它不会将其视为样式表。

（这里用jQuery来解释）

$(style.selector).replaceWith (function () {
  var attributes = $(this).prop("attributes");
  var $newEl = $('<nostyle>')
  $.each(attributes, function() {
    $newEl.attr(this.name, this.value);
  });  
  return $newEl.html($(this).html())
});

然后当你准备好返回样式时，使用这个：

$(notstyle.selector).replaceWith (function () {
  var attributes = $(this).prop("attributes");
  var $newEl = $('<style>')
  $.each(attributes, function() {
    $newEl.attr(this.name, this.value);
  });  
  return $newEl.html($(this).html())
});