使用 Jquery 删除选择器 CSS

Question

我有 CSS 元素选择器，我想在 jQuery 的帮助下删除它的 CSS。 如何删除它 CSS 而不是元素input[type="button"]

问题是写入的 CSS 文件我无法更改，因为它来自 asp.net dll

input[type="button"] {
    min-width: 6em;
    padding: 7px 10px;
    border: 1px solid #ababab;
    background-color: #fdfdfd;
    background-color: #fdfdfd;
    margin-left: 10px;
    font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size: 11px;
    color: #444;
}

Answer 1

害怕使用all: initial用于将所有css属性设置为initial。

 $(document).ready(function() { $("input[type='button']").css('all', 'initial'); });

 input[type="button"] { background: red; color: white; border-color: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="myContainer"> <input type="button" class="btn" value="Submit"> <input type="button" class="btn" value="Reset"> </div>

否则，您应该使用 jquery css()更改所有 css 属性

 $(document).ready(function() { $("input[type='button']").css({ 'background': 'initial', 'color': 'initial' }); });

 input[type="button"] { background: red; color: white; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="myContainer"> <input type="button" class="btn" value="Submit"> <input type="button" class="btn" value="Reset"> </div>

Answer 2

只需向该样式添加一个类并使用removeClass()方法...检查下面的代码片段...

 $('input[type="button"]').removeClass('btn');

 .btn { min-width: 6em; padding: 7px 10px; border: 1px solid #ababab; background-color: #fdfdfd; background-color: #fdfdfd; margin-left: 10px; font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif; font-size: 11px; color: #444; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" class="btn" value="Button"/>

Answer 3

有两种方法可以实现这一点：

1. 使用纯 CSS，只需覆盖与
   input[type="button"]在类和!important的帮助下
2. 用一个 div 替换所有input[type="button"]元素，并使潜水样式像一个按钮，像一个按钮一样工作

例如：

jQuery

var input_buttons = jQuery("input[type='button']");

jQuery.each(input_buttons, function(i, ele) {
  jQuery(ele).replaceWith("<div class='button' onclick='...'>Submit</div>")
});

CSS

.button {
  /* CSS to stylize the div to look like a button */
}

Answer 4

最好的方法是使用这样的class ：

<input type="button" class="myButton">

并将 css 代码插入到.myButton类中，如下所示：

.myButton {
    min-width: 6em;
    padding: 7px 10px;
    border: 1px solid #ababab;
    background-color: #fdfdfd;
    background-color: #fdfdfd;
    margin-left: 10px;
    font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    font-size: 11px;
    color: #444;
}

因此您可以使用此 jquery 代码删除 css 代码：

$('input[type=button]').removeClass('myButton');

 $(document).ready(function(){ $('.myButton').click(function(){ $(this).removeClass('myButton'); }) })

 .myButton { min-width: 6em; padding: 7px 10px; border: 1px solid #ababab; background-color: #fdfdfd; margin-left: 10px; font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif; font-size: 11px; color: #444; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <input type="button" class="myButton" value="Click Me!">