jQuery style operation (get style, modify style, delete style, switch style)

    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: pink;
            color: black;
        }
    </style>
    <script src="jQuery.min.js"></script>//引入jQuery文件
    <body>
	    <div>123</div>
	</body>

The results of the operation are as follows:
Insert picture description here

Get the style of the element
$('div').css('color')-get the element color
$('div').css('height')-get the element width
$('div').css.( 'backgroundColor')-get the element background color

        //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

From the above code and running results, we know:

Enclose the attribute name in quotation marks
Use camel case nomenclature
Get the attributes of the color and return the result in rgb as the unit
Width and height with unit (px)

Modify the style of an element

            $('div').css('backgroundColor', 'yellow);//将背景颜色修改成yellow
            $('div').css('width', '200px');//将宽度修改为200px

The results of the operation are as follows:
Insert picture description here
When modifying the attribute, the camel case naming method is also used, and the attribute and the attribute value to be changed must be quoted
3. Modify multiple styles

Method 1: Object method modification

            //jQuery代码(记得引入jQuery文件)
            $('div').css({
                width:500,//宽度改为500px
                height:500,//高度改为500px
                backgroundColor:'green'//背景颜色改为绿色
            })

The result of the operation is as follows:
Insert picture description here
Obtained from the above code, when using the object method to modify the element attribute, you do not need to bring the unit, and the character attribute value should be enclosed in quotation marks.

Method 2: Method of adding a class
Step 1: Write attributes

/* 要将div的宽度改为100px，高度改为100px，背景颜色改为黄色，字体颜色改为蓝色，加上一个1px，实线，红色的边框，可以把这些属性写在一个类里面，将这个类添加到元素中 */
<style>
	.current{
		width: 100px;
		height: 100px;
		background-color: yellow;
		color: blue;
		border: 1px solid red;
	}
</style>

Step 2: Add the class

	        //jQuery代码(记得引入jQuery文件)
	        $('div').click(function(){
                $(this).addClass('current');//this指的就是当前点击事件对应的元素，点击元素之后添加current类
            });

The results of the operation are as follows:
Insert picture description here
In addition to adding classes, there are also delete classes and switch classes.
Delete class: removeClass

            //jQuery代码(记得引入jQuery文件)
            $('div').click(function(){
                $(this).removeClass('current');//点击删除类
            });

Switch class: toggleClass

            //jQuery代码(记得引入jQuery文件)
            $('div').click(function(){
                $(this).toggleClass('current');//点击切换类
            });

Here, we can find the difference between addClass() in jQuery and className() in DOM:
className will overwrite the previous style, and addclass will not affect the original style

jQuery style operation (get style, modify style, delete style, switch style)

jQuery style operation (get style, modify style, delete style, switch style)

Guess you like