如何在JavaScript中为元素添加类名？
Adding class names using JavaScript can be often used to give certain functionalities to your web application. In this
Adding class names using JavaScript
how to add class names to elements on the DOM through JavaScript?
article, we will learn how to add class names to elements on the DOM through JavaScript?
如何通过JavaScript将类名称添加
使⽤JavaScript添加类名称
使⽤JavaScript添加类名称通常可⽤于为您的Web应⽤程序提供某些功能。 在本⽂中，我们将学习如何通过JavaScript将类名称添加
到DOM上的元素？
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="cdnjs.cloudflare/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="cdnjs.cloudflare/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<style>
body {
background: yellow;
}
.title {
color: white;
}
</style>
<body>
<div class="container">
<h2>Blog Page </h2>
<div class="blog">
<h2 class="center title">How to learn JavaScript</h2>
<div class="card">
<p class="card-content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, ut provident odit corporis quidem neque in facilis enim! Non po                </p>
</div>
<button class="left btn">Subscribe</button>
<button class="right btn">Mark as favorite</button>
</div>
</div>
</div>
</body>
<script>
</script>
</html>
Output
输出量
To demonstrate, let's add some materialize classes to some of our elements. I want the title to align in the center and the
blog heading to have a black background. Also, I want both our buttons to be black.
为了演⽰，让我们向⼀些元素添加⼀些实现类。 我希望标题在中⼼对齐，并且博客标题具有⿊⾊背景。 另外，我希望两个按钮都为⿊⾊。
<script>
const title=document.querySelector('h2');
const heading=document.querySelector('.title');
const subBtn=document.querySelector('.sub');
const favBtn=document.querySelector('.fav');
title.classList.add('center');
heading.classList.add('black');
subBtn.classList.add('black');
favBtn.classList.add('black');
</script>
Output
输出量
Great! Our HTML looks much better now. We can add any CSS class to an element using JavaScript
CSS class to an element using JavaScript by getting a
classList property and calling then add method and pass the desired class name reference to that element, then using the classList property
as a string inside. Let's say that you want to subscribe to this blog post. We'll add a class which disab
les the HTML and add this class when we hit the subscribe button.
CSS类，⽅法是获取对该元素的引⽤，然后使
向元素添加任何CSS类，⽅法
使⽤JavaScript通过向元素
⼤！ 我们HTML现在看起来好多了。 我们可以使⽤JavaScript
classList属性并调⽤然后添加⽅法，然后将所需的类名称作为字符串传递给内部。 假设您要订阅此博客⽂章。 我们将添加⼀个禁⽤
⽤classList属性
HTML的类，并在单击“订阅”按钮时添加此类。
.subscribed{
display: none;
}
Inside our script tag
在我们的脚本标签内
subBtn.addEventListener('click',()=>{
alert("You've now subscribed to this blog post!");
subBtn.classList.add('subscribed');
})
Now when we click the subscribe button we get an alert and after that the button vanishes!
现在，当我们单击“订阅”按钮时，我们将收到警报，然后该按钮消失！
Output
输出量
Cool! Let's hook up something to the favorite button as well. When you click it, I want to change its color to pink and give it a border. Can you think of how we'll do this?
凉！ 让我们也将⼀些东西链接到“收藏夹”按钮上。 当您单击它时，我想将其颜⾊更改为粉红⾊并为其添加边框。 您能想到我们将如何做吗？
CSS:
CSS：
.fav-triggered {
border: 2px solid pink;
color: salmon;
}
JavaScript:
JavaScript：
favBtn.addEventListener('click',()=>{
favBtn.classList.add('fav-triggered');
})
Output
cssclass属性
输出量
The button is styled differently on clicking!
单击时按钮的样式不同！
Thus loads of functionality can be implemented using add method to give our elements classes using JavaScript.
因此，可以使⽤add⽅法来实现功能负载，以使⽤JavaScript为元素类提供功能。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。