jQuery css style manipulation

css style operation

##$().css(name, value); //Settings
$().css(name); //Get
$().css(json object); //Modify multiple css at the same time Style

css() style operation features: ① Style acquisition, jquery can obtain inline, Interior and exterior styles.
The dom method can only obtain inline styles
② Composite attribute styles need to be split into "specific styles" before they can be operated
For example: background needs to be split into background-color background-image, etc. for operation
border: border-left-style border-left-width border-left-color, etc.
margin: margin-left, margin-top, etc.

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
           function f1(){
                alert($('div').css('background-color'));
           }
           function f2(){
            $('div').css('background-color','red')
           }
           function f3(){
                var jn={'width':'300px','height':'300px'};
                $('div').css(jn);
           }
        </script>
    </head>
    <body>
        <div style="width:200px; height:150px; background-color:lightblue;">欢迎大家学习jQuery</div>
        <input type="button" value="获取背景色" onclick="f1()" />
        <input type="button" value="设置背景色" onclick="f2()" /> 
        <input type="button" value="批量设置" onclick="f3()" /> 
    </body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <title>php.cn</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> function f1(){ alert($('div').css('background-color')); } function f2(){ $('div').css('background-color','red') } function f3(){ var jn={'width':'300px','height':'300px'}; $('div').css(jn); } </script> </head> <body> <div style="width:200px; height:150px; background-color:lightblue;">欢迎大家学习jQuery</div> <input type="button" value="获取背景色" onclick="f1()" /> <input type="button" value="设置背景色" onclick="f2()" /> <input type="button" value="批量设置" onclick="f3()" /> </body> </html>

submit Reset Code

Automatic operation

jQuery css style manipulation

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]