如何使用JavaScript更改HTML元素的类以响应onclick或任何其他事件?
当前回答
无意冒犯,但动态更改类是不清楚的,因为它迫使CSS解释器重新计算整个网页的视觉呈现。
原因是CSS解释器几乎不可能知道是否可以更改任何继承或级联,因此简单的答案是:
永远不要动态更改className!-)
但通常只需要更改一两个属性,这很容易实现:
function highlight(elm){
elm.style.backgroundColor ="#345";
elm.style.color = "#fff";
}
其他回答
在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
在支持Internet Explorer 6的普通JavaScript中更改元素的类
您可以尝试使用node attributes属性来保持与旧浏览器(甚至Internet Explorer 6)的兼容性:
函数getClassNode(元素){对于(var i=element.attributes.length;i-;)if(element.attributes[i].nodeName=='class')return元素.attributes[i];}函数removeClass(classNode,className){var索引,classList=classNode.value.split(“”);如果((index=classList.indexOf(className))>-1){classList.拼接(索引,1);classNode.value=classList.join(“”);}}函数hasClass(classNode,className){return classNode.value.indexOf(className)>-1;}函数addClass(classNode,className){if(!hasClass(classNode,className))classNode.value+=“”+className;}document.getElementById('message').addEventListener('click',function(){var classNode=getClassNode(this);var className=hasClass(classNode,“red”)&&“blue”| |“red”;removeClass(classNode,'red');removeClass(classNode,'blue');addClass(classNode,className);}).红色{颜色:红色;}.红色:之前{内容:“我红了!”;}.红色:之后{content:'再次';}.蓝色{颜色:蓝色;}.蓝色:之前{内容:“我是蓝色的!”}<span id=“message”class=“”>单击我</span>
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');
}
线路
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')
应该是:
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
哇,奇怪这里有这么多过分的答案。。。
<div class="firstClass" onclick="this.className='secondClass'">
推荐文章
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 如何使Bootstrap 4卡在卡列相同的高度?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法
- 使用域集图例引导
- 如何以及为什么'a'['toUpperCase']()在JavaScript工作?
- 音频停止功能
- 有Grunt生成index.html不同的设置
- 如何禁用谷歌翻译从HTML在Chrome
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?
- 如何写setTimeout与参数Coffeescript
- 将JavaScript字符串中的多个空格替换为单个空格
- 向HTML表中添加水平滚动条