<button>切换</button>
<div class="div1">123</div>
<script src="./jquery.min.js"></script>
<script>
// JavaScript中,设定class的属性值,会将之前的属性值也覆盖掉
// 如果需要添加新的 class属性值,需要先获取之前的属性值,再拼接上新的属性值
// 如果需要删除其中的某一个属性值,先获取所有的属性值,字符串替换,将要删除的属性值替换为空字符串
// const oDiv = document.querySelector('div');
// oDiv.className = 'div2';
// 在jQuery中有非常灵活简便的class属性值操作方法
// 1,新增标签class属性值
$('div').addClass('div2');
$('div').addClass('div3 div4');
// 2,删除标签class属性值
$('div').removeClass('div3');
$('div').removeClass('div4 div2');
// 3,切换标签class属性值
// 有,删除 没有,新增
const oBtn = document.querySelector('button');
oBtn.addEventListener( 'click' , ()=>{
$('div').toggleClass('div10');
})
// 4,判断是否有这个class属性值
console.log( $('div').hasClass('div1') );
// addClass() 原有基础上,新增class
// removeClass() 原有基础上,删除class
// toggleClass() 有就删除,没有就新增
<style>
div{
100px;
height: 100px;
background: pink;
border:1px solid #000;
}
</style>
</head>
<body>
<div style="color:red;">123</div>
<script src="./jquery.min.js"></script>
<script>
// css样式操作
// jQuery中不用考虑兼容性,所有的语法都不需要考虑浏览器兼容性
// jQuery都会给你处理好
// $().css(属性) 获取属性的属性值 结果有px单位
// $().css(属性,属性值) 设定属性的属性值
// 获取
console.log( $('div').css('color') );
console.log( $('div').css('border') );
console.log( $('div').css('background') );
console.log( $('div').css('width') );
// 设定
// 语法形式1,设定一个属性和属性值
$('div').css('color' , 'blue');
// $('div').css('fontSize' , '100px');
// $('div').css('font-size' , '100px');
$('div').css('font-size' , 100);
// 语法形式2,可以通过一个对象,同时设定多个属性以及对应的属性值
$('div').css({
width : 400,
height : 200,
fontSize : 50,
'background-color' : 'orange',
})