如何使用JavaScript更改HTML元素的类以响应onclick或任何其他事件?
当前回答
Try:
element.className='second'
函数更改(box){box.className='second'}.first{width:70px;height:70px,background:#ff0}.second{width:150px;height:150px,background:#f00;transition:1s}<div onclick=“change(this)”class=“first”>单击我</div>
其他回答
JavaScript中有一个属性className,用于更改HTML元素类的名称。现有的类值将替换为您在className中分配的新类值。
<!DOCTYPE html>
<html>
<head>
<title>How can I change the class of an HTML element in JavaScript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />
<center><button id="change-class">Change Class</button></center>
<script>
var change_class = document.getElementById("change-class");
change_class.onclick = function()
{
var icon=document.getElementById("icon");
icon.className = "fa fa-gear";
}
</script>
</body>
</html>
Credit-如何在JavaScript中更改HTML元素的类名
我在代码中使用了以下普通JavaScript函数。它们使用正则表达式和indexOf,但不需要在正则表达式中引用特殊字符。
function addClass(el, cn) {
var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
c1 = (" " + cn + " ").replace(/\s+/g, " ");
if (c0.indexOf(c1) < 0) {
el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
}
}
function delClass(el, cn) {
var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
c1 = (" " + cn + " ").replace(/\s+/g, " ");
if (c0.indexOf(c1) >= 0) {
el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
}
}
您也可以在现代浏览器中使用element.classList。
线路
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')
应该是:
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
无意冒犯,但动态更改类是不清楚的,因为它迫使CSS解释器重新计算整个网页的视觉呈现。
原因是CSS解释器几乎不可能知道是否可以更改任何继承或级联,因此简单的答案是:
永远不要动态更改className!-)
但通常只需要更改一两个属性,这很容易实现:
function highlight(elm){
elm.style.backgroundColor ="#345";
elm.style.color = "#fff";
}
classList DOM API:
添加和删除类的一种非常方便的方式是classListDOMAPI。该API允许我们选择特定DOM元素的所有类,以便使用JavaScript修改列表。例如:
const el=document.getElementById(“main”);console.log(el.classList);<div class=“content wrapper animated”id=“main”></div>
我们可以在日志中观察到,我们正在取回一个对象,它不仅包含元素的类,还包含许多辅助方法和财产。此对象继承自接口DOMTokenList,该接口在DOM中用于表示一组空格分隔的令牌(如类)。
例子:
const el=document.getElementById('container');函数addClass(){el.classList.add('newclass');}函数replaceClass(){el.classList.replace('fo','newFoo');}函数removeClass(){el.classList.remove('bar');}按钮{边距:20px;}.foo文件{颜色:红色;}.newFoo{颜色:蓝色;}.巴{背景色:粉蓝色;}.new类{边框:2px实心绿色;}<div class=“foo bar”id=“container”>“全身出汗”在natus error sit volupatim accusantium doloremque audantium,totam rem开胃酒,eaque ipsa quae ab illo inventore veritatis et准建筑风格的生活格言不明确。Nemo enim ipsam公司卷舌</div><button onclick=“addClass()”>addClass</button><button onclick=“replaceClass()”>replaceClass</button><button onclick=“removeClass()”>removeClass</button>
推荐文章
- 使伸缩项目正确浮动
- Babel 6改变了它导出默认值的方式
- 如何配置历史记录?
- ES6模板文字可以在运行时被替换(或重用)吗?
- [Vue警告]:找不到元素
- 可以在setInterval()内部调用clearInterval()吗?
- AngularJS控制器的生命周期是什么?
- 无法读取未定义的属性“msie”- jQuery工具
- 形式内联内的形式水平在twitter bootstrap?
- 我的蛋蛋怎么不见了?
- JavaScript中的排列?
- 自定义元素在HTML5中有效吗?
- JavaScript中有睡眠/暂停/等待功能吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?