How to add classname to elements in jquery

Jquery method to add classname to an element: 1. Use the "$(element)" statement to match the element object; 2. Use the addClass() method to add a classname to the element. The syntax is "element object.addClass( "classname to add")".

The operating environment of this tutorial: windows7 system, jquery1.10.0 version, Dell G3 computer.

How to add a classname to an element in jquery

1. Create a new html page, and then add a text with the text

to the html page. and a click event button, and then add a click event to the button.

html code:

<div id="add">点击按钮添加class</div>
<input type="button" value="添加class" onclick="addBtn()" />

Add the style of the class class. Create a

css code:

<style>
.fs40{
font-size: 40px;
}
</style>

2. Introduce the jquery library. Introduce a jquery library after the

js code:

<script type="text/javascript">
function addBtn(){
$("#add").addClass("fs40")
}
</script>

Save the html code page, then open it with a browser, click the button icon, you will see that the font of the

tag becomes larger, indicating that the class class is added successfully .

All codes on the page. You can directly copy all the code, paste it into a new HTML page, modify the jquery library introduction path, save the HTML code and open it with a browser, and click the button to see the effect.

All codes:

<style>
.fs40{
font-size: 40px;
}
</style>

<script type="text/javascript">
function addBtn(){
$("#add").addClass("fs40")
}
</script>


<div id="add">点击按钮添加class</div>
<input type="button" value="添加class" onclick="addBtn()" />

Output results:

##Related video tutorial recommendations:

jQuery video tutorial

The above is the detailed content of How to add classname to elements in jquery. For more information, please follow other related articles on the PHP Chinese website!