jQuery样式操作(获得样式,修改样式,删除样式,切换样式)
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
color: black;
}
</style>
<script src="jQuery.min.js"></script>//引入jQuery文件
<body>
<div>123</div>
</body>
运行结果如下:
- 获得元素的样式
$(‘div’).css(‘color’)——获得元素颜色
$(‘div’).css(‘height’)——获得元素宽度
$(‘div’).css.(‘backgroundColor’)——获得元素背景颜色
//jQuery代码(记得引入jQuery文件)
var color = $('div').css('color');
console.log('颜色是' + color);//颜色是rgb(0, 0, 0)
var background_color = $('div').css('backgroundColor');
console.log('背景颜色是' + background_color);//背景颜色是rgb(255, 192, 203)
var width = $('div').css('width');
console.log('宽度是' + width);//宽度是400px
由上述代码及运行结果我们知道:
- 属性名称要用引号括起来
- 使用驼峰命名法
- 获取颜色的属性返回结果以rgb为单位
- 宽度和高度带单位(px)
- 修改元素的样式
$('div').css('backgroundColor', 'yellow);//将背景颜色修改成yellow
$('div').css('width', '200px');//将宽度修改为200px
运行结果如下:
在进行修改属性这个操作时,同样使用驼峰命名法,而且属性和要改的属性值必须加引号
3. 修改多个样式
方法1:对象方法修改
//jQuery代码(记得引入jQuery文件)
$('div').css({
width:500,//宽度改为500px
height:500,//高度改为500px
backgroundColor:'green'//背景颜色改为绿色
})
运行结果如下
由上述代码得到,使用对象的方法修改元素属性时,不用带单位,字符型的属性值要用引号引起来
方法2:添加类的方法
第一步:写属性
/* 要将div的宽度改为100px,高度改为100px,背景颜色改为黄色,字体颜色改为蓝色,加上一个1px,实线,红色的边框,可以把这些属性写在一个类里面,将这个类添加到元素中 */
<style>
.current{
width: 100px;
height: 100px;
background-color: yellow;
color: blue;
border: 1px solid red;
}
</style>
第二步:添加类
//jQuery代码(记得引入jQuery文件)
$('div').click(function(){
$(this).addClass('current');//this指的就是当前点击事件对应的元素,点击元素之后添加current类
});
运行结果如下:
除了添加类之外,还有删除类和切换类
删除类:removeClass
//jQuery代码(记得引入jQuery文件)
$('div').click(function(){
$(this).removeClass('current');//点击删除类
});
切换类:toggleClass
//jQuery代码(记得引入jQuery文件)
$('div').click(function(){
$(this).toggleClass('current');//点击切换类
});
在这里,我们可以发现jQuery中addClass()和DOM中className()的区别:
className会覆盖掉之前的样式,而addclass不会影响原来的样式