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不会影响原来的样式

jQuery样式操作(获得样式，修改样式，删除样式，切换样式)

jQuery样式操作(获得样式，修改样式，删除样式，切换样式)

猜你喜欢