除了为元素可能具有的每个类单独调用 $("#item").removeClass()
之外,是否有一个可以调用的函数从给定元素中删除所有 CSS 类?
jQuery 和原始 JavaScript 都可以工作。
$("#item").removeClass();
不带参数调用 removeClass
将删除所有项目的类。
也可以使用(但不一定推荐,正确的方法就是上面那个):
$("#item").removeAttr('class');
$("#item").attr('class', '');
$('#item')[0].className = '';
如果您没有 jQuery,那么这几乎是您唯一的选择:
document.getElementById('item').className = '';
等等,如果没有指定任何具体内容,removeClass() 是否默认删除所有类?所以
$("#item").removeClass();
会自己做...
只需将真实 DOM 元素的 className
属性设置为 ''
(无)。
$('#item')[0].className = ''; // the real DOM element is at [0]
其他人说只调用 removeClass
有效 - 我用 Google jQuery Playground 测试了这个:http://savedbythegoog.appspot.com/?id=ag5zYXZlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGIS61gEM ...并且它有效。所以你也可以这样做:
$("#item").removeClass();
当然。
$('#item')[0].className = '';
// or
document.getElementById('item').className = '';
删除特定类:
$('.class').removeClass('class');
假设元素有 class="class another-class"。
最短的方法
$('#item').removeAttr('class').attr('class', '');
你可以试试:
$(document).ready(function() {
$('body').find('#item').removeClass();
});
如果您必须在没有类名的情况下访问该元素,例如您必须添加一个新的类名,您可以这样做:
$(document).ready(function() {
$('body').find('#item').removeClass().addClass('class-name');
});
我在我的项目中使用该函数在 HTML 构建器中删除和添加类。
我喜欢使用原生 JavaScript 来做到这一点,信不信由你!
解决方案1:类名
删除所有项目的所有类别
const items = document.querySelectorAll('item');
for (let i = 0; i < items.length; i++) {
items[i].className = '';
}
仅删除第一项的所有类别
const item1 = document.querySelector('item');
item1.className = '';
解决方案2:类列表
// remove all class of all items
const items = [...document.querySelectorAll('.item')];
for (const item of items) {
item.classList.value = '';
}
// remove all class of the first item
const items = [...document.querySelectorAll('.item')];
for (const [i, item] of items.entries()) {
if(i === 0) {
item.classList.value = '';
}
}
// or
const item = document.querySelector('.item');
item.classList.value = '';
jQuery 方式(不推荐)
$("#item").removeClass(); $("#item").removeClass("class1 ... classn");
参考
https://developer.mozilla.org/en-US/docs/Web/API/Element/className
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
$('#elm').removeAttr('class');
属性“class”将不再出现在“elm”中。
removeClass();
对我不起作用。
由于并非所有版本的 jQuery 都是相同的,您可能会遇到与我相同的问题,这意味着调用 $("#item").removeClass();实际上并没有删除该类(可能是一个错误)。
更可靠的方法是简单地使用原始 JavaScript 并完全删除 class 属性。
document.getElementById("item").removeAttribute("class");
让我们使用这个例子。也许您希望您网站的用户知道某个字段是有效的,或者需要通过更改字段的背景颜色来引起注意。如果用户点击重置,那么您的代码应该只重置具有数据的字段,而不必费心循环浏览页面上的所有其他字段。
此 jQuery 过滤器将仅删除具有此类的输入或选择字段的类“highlightCriteria”。
$form.find('input,select').filter(function () {
if((!!this.value) && (!!this.name)) {
$("#"+this.id).removeClass("highlightCriteria");
}
});
尝试使用 removeClass
。
例如:
var nameClass=document.getElementsByClassName("clase1"); console.log("之后", nameClass[0]); $(".clase1").removeClass(); var nameClass=document.getElementsByClassName("clase1"); console.log("之前", nameClass[0]);
我有一个类似的问题。就我而言,在禁用元素上应用了 aspNetDisabled 类,并且所有禁用的控件都有错误的颜色。所以,我使用 jQuery 在我想要的每个元素/控件上删除了这个类,现在一切正常并且看起来很棒。
这是我删除 aspNetDisabled 类的代码:
$(document).ready(function () {
$("span").removeClass("aspNetDisabled");
$("select").removeClass("aspNetDisabled");
$("input").removeClass("aspNetDisabled");
});
不定期副业成功案例分享
attr()
版本不应该是prop()
吗?If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed.
api.jquery.com/removeclass