实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.设置元素的类样式</title>
<style type="text/css">
.circle {border-radius: 50%;}
.shadow {box-shadow: 3px 3px 3px #888}
</style>
</head>
<body>
<img src="./images/cyx.jpg" width="200" id="pic">
</body>
</html>
<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
//设置元素的类样式
//1.设置元素标签的class属性：
//2.直接设置标签的style属性：内敛样式
//
//1.addClass()
// $('#pic').addClass('circle')
// $('#pic').addClass('shadow')
// $('#pic').addClass('circle shadow')
//2.removeClass()
// $('#pic').removeClass('circle')
// $('#pic').removeClass('shadow')
// $('#pic').removeClass('circle shadow')
//3.样式的自动切换：toggleClass()
//如果当前元素没有改样式，就自动执行添加操作，如果有，就自动执行删除操作
$('#pic').toggleClass('circle shadow')
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
