[jQuery] 스타일 관련 메서드 알아보기

jQuery : 스타일 관련 메서드

제이쿼리에서 사용되는 스타일 관련 메서드에 대해 알아봅시다.

css() 메서드

실행 분류	형식
취득	$("div").css("width");
생성, 변경	$("div").css("background-color", "red").css("padding", "10px");
생성, 변경	$("div").css({background-color: "red", padding: "10px"});
콜백 함수	$("div").css("width", function(index, .w) { 　// index는 각 div 요소의 index 0,1,2 　// w은 각 div 요소 width 속성 return css 속성 // 각 div 요소의 속성을 변경함. }); …… <div>내용</div> <div>내용</div> <div>내용</div>

css() 메서드 : 예제 코드

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>css() 메서드<title> 
    <style> 
        * {
            margin: 0;
            padding: 0;
        }
        div:nth-child(1) {
            background: red;
        }
        div:nth-child(2) {
            background: green;
        }
        div:nth-child(3) {
            background: blue;
        }
    </style> 
    <script src="jquery-3.3.1.min.js"></script> 
    <script> 
        $(document).ready(function() {
            $("div").eq(0).css({padding: 10px, "text-align": "center"});
            $("div").css("width", function(index) {
                return index * 100 + 100; // 100,200,300
            });
        });
    </script> 
</head> 
<body> 
    <div>내용1</div>
    <div>내용2</div>
    <div>내용3</div>
</body> 
</html>

코드펜 결과

width, height 관련 메서드

메서드 종류	설명
width()	요소의 가로 길이를 취득, 변경 가능
innerWidth()	padding이 적용된 요소의 가로 길이를 취득, 변경 가능
outerWidth()	border와 margin이 적용된 요소의 가로 길이를 취득, 변경 가능. outerWidth()는 요소의 width값 + 좌/우 border 값 outerWidth(true)는 요소의 width값 + 좌/우 border값 + 좌/우 margin값
height()	요소의 높이를 취득, 변경 가능
innerHeight()	padding이 적용된 요소의 높이를 취득, 변경 가능
outerHeight()	border와 margin이 적용된 요소의 높이를 취득, 변경 가능. outerHeight()는 요소의 height값 + 상/하 border 값 outerHeight(true)는 요소의 height값 + 상/하 border값 + 상/하 margin값

width, height 관련 메서드 : 예제 코드

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>width, height 메서드<title> 
    <style> 
        * {
            margin: 0;
            padding: 0;
        }
        div {
            padding: 20px;
            margin: 20px;
            background: #ff6600;
        }
    </style> 
    <script src="jquery-3.3.1.min.js"></script> 
    <script> 
        $(document).ready(function() {
            $("div").width(150).height(150);
            console.log("width 150" + $("div").width());
            console.log("height " + $("div").height());
            console.log("innerWidth " + $("div").innerWidth());
            console.log("innerHeight " + $("div").innerHeight());
            console.log("outerWidth " + $("div").outerWidth(true));
            console.log("outerHeight " + $("div").outerHeight(true));
        });
    </script> 
</head> 
<body> 
    <div>내용</div>
</body> 
</html>

코드펜 결과

위치 관련 메서드

메서드 종류	설명
offset()	$("div").offset().left $("div").offset().top $("div").offset({left: 10, top: 10})	html 기준으로 left, top 값을 취득, 변경할 수 있음.
position()	$("div").position().left $("div").position().top	부모 요소 기준으로 left, top 값을 취득할 수 있음.

위치 관련 메서드 : 예제 코드

<!DOCTYPE html> 
<html lang="ko"> 
<head> 
    <meta charset="UTF-8"> 
    <title>위치 관련 메서드 메서드<title> 
    <style> 
        * {
            margin: 0;
            padding: 0;
        }
        #outer {
            width: 500px;
            height: 500px;
            margin: 50px;
            position: relative;
            background: #ff6600;
        }
        #inner {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 80px;
            top: 50px;
            background: #ccc;
        }
    </style> 
    <script src="jquery-3.3.1.min.js"></script> 
    <script> 
        $(document).ready(function() {
            console.log($("#inner").offset().left);
            console.log($("#inner").offset().top);
            console.log($("#inner").position().left);
            console.log($("#inner").position().top);
        });
    </script> 
</head> 
<body>
    <div id="outer">
        <div id="inner">내용</div>
    </div>
</body> 
</html>

결과 보기

130
100
80
50

코드펜 결과

'jQuery' 카테고리의 다른 글

[jQuery] 속성 관련 메서드 알아보기 (4)	2022.09.03
[jQuery] 클래스 관련 메서드 알아보기 (6)	2022.09.03
[JavaScript] jQuery(제이쿼리) - 탐색 선택자 (3)	2022.08.30
[JavaScript] jQuery(제이쿼리) - 필터 선택자 (3)	2022.08.30
[JavaScript] jQuery(제이쿼리) - 속성 선택자 (4)	2022.08.30

코딩공책📚

[jQuery] 스타일 관련 메서드 알아보기

jQuery : 스타일 관련 메서드

css() 메서드

css() 메서드 : 예제 코드

코드펜 결과

width, height 관련 메서드

width, height 관련 메서드 : 예제 코드

코드펜 결과

위치 관련 메서드

위치 관련 메서드 : 예제 코드

코드펜 결과

'jQuery' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[jQuery] 스타일 관련 메서드 알아보기

jQuery : 스타일 관련 메서드

css() 메서드

css() 메서드 : 예제 코드

코드펜 결과

width, height 관련 메서드

width, height 관련 메서드 : 예제 코드

코드펜 결과

위치 관련 메서드

위치 관련 메서드 : 예제 코드

코드펜 결과

'jQuery' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바