如何使用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>
其他回答
这里有一个toggleClass来切换/添加/删除元素上的类:
// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));
elem.className=elem.className.replace(matchRegExp, ''); // clear all
if (add) elem.className += ' ' + theClass;
}
参见JSFiddle。
也可以在这里看到动态创建新类的答案。
用于更改类的现代HTML5技术
现代浏览器增加了classList,它提供了一些方法,可以在不需要库的情况下更容易地操作类:
document.getElementById("MyElement").classList.add('MyClass');
document.getElementById("MyElement").classList.remove('MyClass');
if ( document.getElementById("MyElement").classList.contains('MyClass') )
document.getElementById("MyElement").classList.toggle('MyClass');
不幸的是,这些在v10之前的Internet Explorer中不起作用,尽管有一个垫片可以将其添加到IE8和IE9中,可从该页面获得。不过,它得到了越来越多的支持。
简单的跨浏览器解决方案
选择元素的标准JavaScript方法是使用document.getElementById(“Id”),这是下面的示例所使用的-当然,您可以通过其他方式获取元素,在正确的情况下,可以直接使用它-但是,详细讨论这一点超出了答案的范围。
要更改元素的所有类,请执行以下操作:
要用一个或多个新类替换所有现有类,请设置className属性:
document.getElementById("MyElement").className = "MyClass";
(可以使用空格分隔的列表来应用多个类。)
要向元素添加其他类,请执行以下操作:
要在不删除/影响现有值的情况下将类添加到元素,请附加一个空格和新类名,如下所示:
document.getElementById("MyElement").className += " MyClass";
要从元素中删除类,请执行以下操作:
要在不影响其他潜在类的情况下将单个类删除到元素,需要简单的正则表达式替换:
document.getElementById("MyElement").className =
document.getElementById("MyElement").className.replace
( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */
此正则表达式的解释如下:
(?:^|\s) # Match the start of the string or any single whitespace character
MyClass # The literal text for the classname to remove
(?!\S) # Negative lookahead to verify the above is the whole classname
# Ensures there is no non-space character following
# (i.e. must be the end of the string or space)
g标志告诉replace根据需要重复,以防类名被多次添加。
要检查类是否已应用于元素,请执行以下操作:
上面用于删除类的相同正则表达式也可以用作检查特定类是否存在:
if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )
### Assigning these actions to onClick events:
虽然可以直接在HTML事件属性中编写JavaScript(例如onClick=“this.className+='MyClass'”),但这不是推荐的行为。特别是在大型应用程序上,通过将HTML标记与JavaScript交互逻辑分离,可以实现更易于维护的代码。
实现这一点的第一步是创建一个函数,并调用onClick属性中的函数,例如:
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
</script>
...
<button onClick="changeClass()">My Button</button>
(不需要在脚本标记中包含此代码,这只是为了示例的简洁,将JavaScript包含在不同的文件中可能更合适。)
第二步是将onClick事件移出HTML并移入JavaScript,例如使用addEventListener
<script type="text/javascript">
function changeClass(){
// Code examples from above
}
window.onload = function(){
document.getElementById("MyElement").addEventListener( 'click', changeClass);
}
</script>
...
<button id="MyElement">My Button</button>
(请注意,window.onload部分是必需的,以便在HTML完成加载后执行该函数的内容-如果没有这一点,调用JavaScript代码时MyElement可能不存在,因此该行将失败。)
JavaScript框架和库
以上代码都是标准JavaScript代码,但是,通常使用框架或库来简化常见任务,并从编写代码时可能想不到的固定错误和边缘情况中获益。
虽然有些人认为添加一个~50KB的框架来简单地更改一个类是过分的,但如果您正在做大量的JavaScript工作或任何可能具有异常跨浏览器行为的事情,那么它非常值得考虑。
(非常粗略地说,库是为特定任务设计的一组工具,而框架通常包含多个库并执行一整套任务。)
下面使用jQuery复制了上面的示例,jQuery可能是最常用的JavaScript库(尽管还有其他值得研究的)。
(注意这里的$是jQuery对象。)
使用jQuery更改类:
$('#MyElement').addClass('MyClass');
$('#MyElement').removeClass('MyClass');
if ( $('#MyElement').hasClass('MyClass') )
此外,jQuery提供了一个快捷方式,可以在类不适用时添加该类,或者删除具有以下功能的类:
$('#MyElement').toggleClass('MyClass');
### Assigning a function to a click event with jQuery:
$('#MyElement').click(changeClass);
或者,不需要id:
$(':button:contains(My Button)').click(changeClass);
可以这样使用node.className:
document.getElementById('foo').className = 'bar';
根据PPK,这应该在Internet Explorer 5.5及更高版本中工作。
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元素的类名
这是我的版本,完全可用:
function addHTMLClass(item, classname) {
var obj = item
if (typeof item=="string") {
obj = document.getElementById(item)
}
obj.className += " " + classname
}
function removeHTMLClass(item, classname) {
var obj = item
if (typeof item=="string") {
obj = document.getElementById(item)
}
var classes = ""+obj.className
while (classes.indexOf(classname)>-1) {
classes = classes.replace (classname, "")
}
obj.className = classes
}
用法:
<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >
推荐文章
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前,每次测试
- 如何强制一个功能React组件渲染?
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中观察路由变化?
- JavaScript DOM删除元素
- 将dd-mm-yyyy字符串转换为日期
- Javascript复选框onChange
- Javascript函数前导bang !语法
- 如何在页面上遍历所有DOM元素?
- 使用“!”的含义是什么?重要的”?
- 在JS/jQuery中触发按键/按键/按键事件?
- 如何每5秒重新加载页面?
- 避免浏览器弹出窗口拦截器