jQuery 속성 및 스타일(6)

JavaScript를 통해 dom 요소의 스타일 속성을 가져오면 해당 요소에 스타일 속성을 동적으로 할당할 수 있습니다. jQuery에서 스타일 속성을 동적으로 수정하려면 css() 메서드만 사용하면 됩니다.

css() 메서드: 요소의 스타일 속성에 대한 계산된 값을 가져오거나 요소의 CSS 속성을 설정합니다.

Get:

css( propertyName ): 일치하는 요소 집합에서 첫 번째 요소의 스타일 속성에 대해 계산된 값 가져오기

css( propertyNames ): 배열을 전달하고 개체 결과 반환

설정:

css (propertyName, value ): CSS 설정

css( propertyName, function ): 콜백 함수를 전달하고 처리를 위해 해당 값을 반환할 수 있습니다.

css( Properties ): 개체를 전달하고 여러 스타일을 설정할 수 있습니다. 같은 시간

참고:

브라우저 속성 획득 방법은 다릅니다. 특정 값을 얻을 때 jQuery는 통합 처리를 사용합니다. 예를 들어 색상은 RBG를 사용하고 크기는 Camel Case를 지원합니다. 쓰기 및 대소문자 혼합 쓰기 및 내부 내결함성 처리가 수행됩니다

숫자가 값으로만 사용되는 경우 jQuery는 이를 문자열로 변환하고 .css("width 와 같이 문자열 끝에 px를 추가합니다. ",50}) 및 .css("width ","50px"})

코드를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div>php 中文网</div>

    <script>
        $('div').css('color','red');
    </script>
</body>
</html>

div의 콘텐츠 스타일을 변경합니다

무엇을 살펴보겠습니다. 여러 스타일을 변경하면 이런 일이 발생합니다. 예를 들어 div 태그의 너비를 높음으로 설정하거나 배경을 설정하고 싶은데 어떻게 작성해야 하나요?

그럼 다음과 같은 코드 작성을 시작해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div>php 中文网</div>
    
    <script>
        $("div").css({
            width:'200px',
            height:'200px',
            background:'#ccc'
        });
    </script>
</body>
</html>

위 코드를 보면 ｄｽｖ　의 너비와 높이 배경을 원하는 스타일로 설정할 수 있습니다.

참고: 작성할 때, 작성한 후 속성은 쉼표로 끝내야 합니다. 마지막에 쉼표를 추가할 수 없습니다

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div>php 中文网</div> <script> $("div").css({ width:'200px', height:'200px', background:'#ccc' }); </script> </body> </html>

제출하다 코드 재설정

자동운전