一、操作css方法
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
<div></div>
<script>
$(function(){
// let width = $('div').css('width')
// console.log(width);
// $('div').css('width','300px')
// $('div').css('width',300)
//$('div').css(width,300)属性名一定要加引号
//参数可以是对象形式
$('div').css({
width : 300,
height: 300,
backgroundColor : 'blue',
})
})
</script>
</body>
二、设置类样式方法
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
.current {
width: 300px;
height: 300px;
background-color: green;
}
.current1 {
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
<script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body>
<div class="current"></div>
<script>
$(function () {
//添加
// $('div').click(function(){
// $('div').addClass('current')
// })
//删除
// $('div').click(function(){
// $('div').removeClass('current')
// })
//切换
$('div').click(function(){
$('div').toggleClass('current1')
})
})
</script>
</body>