如何在JavaScript中为元素添加类名？

最新推荐文章于 2024-05-06 18:17:39 发布

「已注销」

最新推荐文章于 2024-05-06 18:17:39 发布

阅读量6.8k

点赞数

文章标签： css javascript html js jquery ViewUI

原文链接：https://www.includehelp.com/code-snippets/how-to-add-a-class-name-to-an-element-in-javascript.aspx

版权

Adding class names using JavaScript can be often used to give certain functionalities to your web application. In this article, we will learn how to add class names to elements on the DOM through 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="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/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 possimus provident vitae culpa sed facere voluptatum expedita! Mollitia, rerum porro. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, ut provident odit corporis quidem neque in facilis enim! Non possimus provident vitae culpa sed facere voluptatum expedita! Mollitia, rerum porro. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, ut provident odit corporis quidem neque in facilis enim! Non possimus provident vitae culpa sed facere voluptatum expedita! Mollitia, rerum porro. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, ut provident odit corporis quidem neque in facilis enim! Non possimus provident vitae culpa sed facere voluptatum expedita! Mollitia, rerum porro. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, ut provident odit corporis quidem neque in facilis enim! Non possimus provident vitae culpa sed facere voluptatum expedita! Mollitia, rerum porro. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero, ut provident odit corporis quidem neque in facilis enim! Non possimus provident vitae culpa sed facere voluptatum expedita! Mollitia, rerum porro.
                </p>
            </div>
            <button class="left btn">Subscribe</button>
            <button class="right btn">Mark as favorite</button>
        </div>
    </div>
    </div>

</body>
<script>
</script>

</html>

Output

输出量

adding a class to an element in JavaScript | Example 1

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

输出量

adding a class to an element in JavaScript | Example 2

Great! Our HTML looks much better now. We can add any CSS class to an element using JavaScript by getting a reference to that element, then using the classList property and calling then add method and pass the desired class name as a string inside. Let's say that you want to subscribe to this blog post. We'll add a class which disables the HTML and add this class when we hit the subscribe button.

大！我们HTML现在看起来好多了。我们可以使用JavaScript通过向元素添加任何CSS类，方法是获取对该元素的引用，然后使用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

输出量

adding a class to an element in JavaScript | Example 3

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

输出量

adding a class to an element in JavaScript | Example 4

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为元素类提供功能。

翻译自: https://www.includehelp.com/code-snippets/how-to-add-a-class-name-to-an-element-in-javascript.aspx

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何在JavaScript中为元素添加类名？

Adding class names using JavaScript can be often used to give certain functionalities to your web application. In this article, we will learn how to add class names to elements on the DOM through Java...
复制链接

扫一扫