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

I have a table and I want to make cell editable by showing the input element when user click the cell and I want to give the same height and width to input that cell have. The problem is I am using Angular Material and they have some style on input element (not through class) and it overrides the class or inline style which I am trying to apply on input element. So how can I remove those style from input element with jQuery?

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

Css is apply like this

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

4 个解决方案

#1

You can do it with jQuery like below

您可以使用下面的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"  />

You can do it with css like below

你可以用下面的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"  />

#2

You can use this:

你可以用这个：

$(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"/>

#3

-1

For inline css use removeAttr('style') but for the styles getting applied via css, you need to remove classes as well. use removeAttr('class') for this.

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

if the css is applied on tag, thenbest way is to add a class like active and add the css you want to it like .active { border-style: none, ... } etc.

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

#4

-1

$("class/tag/id").removeAttr('style/class/id');

$（ “类/标签/ ID”）removeAttr（ '风格/班/ ID'）。

#1