jquery设置class jquery设置class属性

jQuery给多个不同元素添加class样式的方法

jQuery可以通过addClass()方法给多个不同的html元素同时添加相同的class

<!DOCTYPE html>

<html>

<head>

</script>

$(document).ready(function(){

$("button").click(function(){

$("h1,h2,p").addClass("blue");

$("div").addClass("important");

});

</script>

.important

{

font-weight:bold;

font-size:xx-large;

}

.blue

{

color:blue;

}

</style>

</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<div>This is some important text!</div>

<br>

<button>Add classes to elements</button>

</body>

</html>

jquery或者JS怎么改class的名字

jquery可以使用attr()或prop()方法修改类名，javascript可以修改对象的className属性，关键代码如下：$("#test").attr("class","blue");$("#test").prop("class","blue");document.getElementById("test").className = "blue";实例演示如下:

1、HTML结构<style>.red{color:red !important;}.blue{color:blue !important;}</style><div id="test">我是示例DIV</div><input type="button" id="js" value="使用javascript方法修改类名为red"><br><input type="button" id="jq" value="使用jquery方法修改类名为blue"><br>

2、jquery代码$(function(){$("#jq").click(function() {$("#test").attr("class","blue");});}); window.onload = function(){document.getElementById("js").onclick = function(){document.getElementById("test").className = "red";}}3、效果演示

谷歌浏览器

谷歌浏览器

谷歌浏览器