jQuery CSS 스타일 조작

css 스타일 작업

$().css(name, value); //
$().css(name) 설정; //Get
$() .css (json object); //여러 CSS 스타일을 동시에 수정

css() 스타일 작업 기능:
① 스타일 획득, jquery는 인라인, 내부 및 외부 스타일을 얻을 수 있습니다.
dom 메소드는 인라인 스타일만 얻을 수 있습니다
② 복합 속성 스타일은 작동하기 전에 "특정 스타일"로 분할되어야 합니다.
예: 배경을 배경색 배경 이미지 등으로 분할하여 작동해야 합니다
테두리: 테두리-왼쪽 스타일 테두리-왼쪽 너비 테두리-왼쪽-색상 등
margin: 여백-왼쪽 여백-상단 등

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

지속적인 학습

새로운 파일

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

제출하다 코드 재설정

자동운전