如何使用JavaScript更改HTML元素的类以响应onclick或任何其他事件?
当前回答
是的,有很多方法可以做到这一点。在ES6语法中,我们可以很容易地实现。使用此代码切换添加和删除类。
const tabs=document.querySelectorAll('.menu-li');for(制表符的let制表符){tab.onclick=函数(){let activetab=document.querySelectorAll('li.active');activetab[0].classList.remove('active')tab.classList.add('active');}}正文{填充:20px;字体系列:无衬线;}上一页{边距:20px 0;列表样式:无;}李{背景:#dfdfdf;填充:10px;边距:6px 0;光标:指针;}li.活动{背景:#2794c7;字号:粗体;颜色:#ffffff;}<i> 请单击项目:</i><ul class=“menu”><li class=“active”><span>三个</span></li><li>两个</span></li><li>一个</span></li></ul>
其他回答
在ASP.NET中使用JavaScript更改元素的CSS类:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
End If
End Sub
使用纯JavaScript代码:
function hasClass(ele, cls) {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
function replaceClass(ele, oldClass, newClass){
if(hasClass(ele, oldClass)){
removeClass(ele, oldClass);
addClass(ele, newClass);
}
return;
}
function toggleClass(ele, cls1, cls2){
if(hasClass(ele, cls1)){
replaceClass(ele, cls1, cls2);
}else if(hasClass(ele, cls2)){
replaceClass(ele, cls2, cls1);
}else{
addClass(ele, cls1);
}
}
4种可能的操作:添加、删除、检查和切换
让我们看看每个操作的多种方式。
1.添加类
方法1:在现代浏览器中添加类的最佳方法是使用元素的classList.add()方法。
案例1:添加单个类函数addClass(){let element=document.getElementById('id1');//添加类element.classList.add('beautify');}案例2:添加多个类在add()方法中通过逗号添加多个类函数addClass(){let element=document.getElementById('id1');//添加多个类element.classList.add('class1','class2','class3');}
方法2-您还可以使用className属性向HTML元素添加类。
案例1:重写预先存在的类当您将新类分配给className属性时,它将覆盖上一个类。函数addClass(){let element=document.getElementById('id1');//添加多个类element.className=“美化”;}案例2:添加类而不覆盖对类使用+=运算符不覆盖以前的类。此外,在新类之前添加额外的空间。函数addClass(){let element=document.getElementById('id1');//添加单个多个类element.className+=“美化”;//添加多个类element.className+=“class1 class2 class3”;}
2.删除类
方法1-从元素中移除类的最佳方法是classList.remove()方法。
案例1:删除单个类只需在方法中传递要从元素中删除的类名。函数removeClass(){let element=document.getElementById('id1');//删除类element.classList.remove('beautify');}案例2:删除多个类传递用逗号分隔的多个类。函数removeClass(){let element=document.getElementById('id1');//删除类element.classList.remove('class1','class2','class3');}
方法2-您也可以使用className方法删除类。
案例1:删除单个类如果元素只有一个类,并且您想要删除它,那么只需为className方法分配一个空字符串。函数removeClass(){let element=document.getElementById('id1');//删除类element.className=“”;}案例2:删除多个类如果元素有多个类,首先使用className属性从元素中获取所有类,然后使用replace方法,用空字符串替换所需的类,最后将其分配给元素的className属性。函数removeClass(){let element=document.getElementById('id1');//删除类element.className=element.cclassName.replace('class1','');}
3.检查类别
要检查元素中是否存在类,只需使用classList.contains()方法即可。如果类存在,则返回true,否则返回false。
function checkClass() {
let element = document.getElementById('id1');
// checking class
if(element.classList.contains('beautify') {
alert('Yes! class exists');
}
}
4.切换类
要切换类,请使用classList.tggle()方法。
function toggleClass() {
let element = document.getElementById('id1');
// toggle class
element.classList.toggle('beautify');
}
哇,奇怪这里有这么多过分的答案。。。
<div class="firstClass" onclick="this.className='secondClass'">
OP的问题是如何使用JavaScript更改元素的类?
现代浏览器允许您使用一行JavaScript实现这一点:
document.getElementById('id').classList.replace('span1','span2')
classList属性提供了具有多种方法的DOMTokenList。可以使用add()、remove()或replace()等简单操作对元素的classList进行操作。或者像使用key()、values()和entries()来处理对象或Map那样使用非常复杂的类。
彼得·布顿(Peter Boughton)的回答很好,但现在已经超过十年了。所有现代浏览器现在都支持DOMTokenList-请参阅https://caniuse.com/#search=classList甚至Internet Explorer 11也支持一些DOMTokenList方法。
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?