Question

我有一个表格，我希望通过在用户单击单元格时显示输入元素来使单元格可编辑，并且我想为输入该单元格提供相同的高度和宽度。问题是我使用的是Angular Material，它们在input元素上有一些样式（不是通过类），它会覆盖我尝试在输入元素上应用的类或内联样式。那么如何用jQuery从input元素中删除这些样式呢？

Css就像这样适用

input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}

Answer 1

您可以使用jQuery（如下所示）

$("input").focus(function(){ $(this).css("all","unset"); });

input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: red;
border-image: initial;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text"  />

您可以使用下面的css

来完成

input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
user-select: text;
cursor: auto;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: red;
border-image: initial;
}

input:focus {
  all: initial;
  * {
    all: unset;
  }
}

<input type="text"  />

Answer 2

您可以使用：

$(document).ready(function(){
  //$("#inp1").removeAttr('style');
  $("input").removeAttr('style');
  //$("input [type='text']").removeAttr('style');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" style="height:40px;" id="inp1"/>

Answer 3

$（＆＃34;类/标签/ ID＆＃34）。removeAttr（＆＃39;风格/类别/ ID＆＃39）;

Answer 4

对于内联css使用removeAttr('style')但是对于通过css应用的样式，您还需要删除类。请使用removeAttr('class')。

如果css应用于tag，那么最好的方法是添加一个类似active的类，并像.active { border-style: none, ... }等一样添加你想要的css。

使用JQuery或CSS从html元素中删除所有css？

4 个答案: