CSS 스타일, 위치 및 크기를 작동하기 위한 jquery 메서드 요약

CSS 스타일, 위치 및 크기를 작동하기 위한 jquery 메서드 요약_jquery

WBOY

풀어 주다： 2016-05-16 16:29:48

원래의

1155명이 탐색했습니다.

1. CSS

1. CSS(이름)

첫 번째로 일치하는 요소의 스타일 속성에 액세스합니다.
반환 값 문자열
매개변수
name(String): 액세스할 속성의 이름
예:

코드 복사 코드는 다음과 같습니다.

$("p").css("color"); //첫 번째 단락의 색상 스타일 속성 값을 가져옵니다. 

2. CSS(속성)

이름/값 쌍 개체를 일치하는 모든 요소의 스타일 속성으로 설정합니다. 이는 일치하는 모든 요소에 많은 수의 스타일 속성을 설정하는 가장 좋은 방법입니다.
반환값 jQuery
매개변수
Properties(Map) : 스타일 속성으로 설정할 이름/값 쌍
예:

코드 복사 코드는 다음과 같습니다.

//1 모든 문단의 글꼴 색상을 빨간색으로, 배경을 파란색으로 설정 

$("p").css({ 색상: "#ff0011", 배경: "파란색" });
//2 속성 이름에 "-"가 포함된 경우 따옴표 
를 사용해야 합니다.
$("p").css({ "margin-left": "10px", "ground-color": "blue" }) 

3. CSS(이름, 값)

일치하는 모든 요소에 스타일 속성 값을 설정합니다. 숫자는 자동으로 픽셀값으로 변환됩니다.

반환값 jQuery
매개변수

이름(값): 속성 이름

값(문자열, 숫자): 속성 값
예:

코드 복사 코드는 다음과 같습니다.

$("p").css("color","red"); //모든 문단의 글꼴을 빨간색으로 설정

2. 위치

1. 오프셋()

현재 보기 창에서 일치하는 요소의 상대 오프셋을 가져옵니다. 반환된 객체에는 top과 left라는 두 가지 정수 속성이 포함되어 있습니다.

참고: 이 방법은 보이는 요소에만 작동합니다.
반환값 객체{top,left}
예:

코드 복사 코드는 다음과 같습니다.

/*
//두 번째 세그먼트의 오프셋을 가져옵니다
문서 조각:

안녕하세요

두 번째 단락

*/
var p = $("p:마지막")
var 오프셋 = p.offset()
p.html("왼쪽: " offset.left ", 위쪽: " offset.top)

2. 위치()

상위 요소를 기준으로 일치하는 요소의 오프셋을 가져옵니다.

반환된 객체에는 top과 left라는 두 가지 정수 속성이 포함되어 있습니다. 정확한 계산을 위해 채우기, 테두리 및 채우기 속성에 픽셀 단위를 사용하십시오. 이 방법은 보이는 요소에만 작동합니다.

반환값 객체{top,left}
예:

코드 복사 코드는 다음과 같습니다.

//첫 번째 문단의 오프셋을 구합니다
문서 조각:

안녕하세요

두 번째 단락

*/
var p = $("p:첫 번째")
var 위치 = p.position()
$("p:last").html("왼쪽: " position.left ", 위쪽: " position.top)

3. 스크롤탑()

스크롤 막대 상단을 기준으로 일치하는 요소의 오프셋을 가져옵니다. 참고: 이 방법은 보이는 요소와 숨겨진 요소 모두에 적용됩니다.

반환 값 정수

예:

코드 복사 코드는 다음과 같습니다. /*

//스크롤 막대 상단을 기준으로 첫 번째 세그먼트의 오프셋을 가져옵니다.

문서 조각:

안녕하세요

두 번째 단락

*/
var p = $("p:첫 번째")
$("p:last").text("scrollTop:" p.scrollTop())

4. 스크롤탑(val)

매개변수 값을 전달할 때 스크롤 막대의 상단 오프셋을 이 값으로 설정합니다. 이 방법은 보이는 요소와 숨겨진 요소 모두에 적용됩니다. 반환값 jQuery 예:

코드 복사

코드는 다음과 같습니다. $("div.demo").scrollTop(300)

5. 스크롤왼쪽()

스크롤 막대의 왼쪽을 기준으로 일치하는 요소의 오프셋을 가져옵니다. 이 방법은 보이는 요소와 숨겨진 요소 모두에 적용됩니다.
반환 값 정수
예:

코드 복사 코드는 다음과 같습니다.

/*
//스크롤 막대의 왼쪽을 기준으로 첫 번째 세그먼트의 오프셋을 가져옵니다.
문서 조각:

안녕하세요

두 번째 단락

*/
var p = $("p:첫 번째")
$("p:last").text("scrollLeft:" p.scrollLeft())

6. 스크롤왼쪽(val)

매개변수 값을 전달할 때 스크롤 막대의 왼쪽 오프셋을 이 값으로 설정합니다. 이 방법은 보이는 요소와 숨겨진 요소 모두에 적용됩니다.

반환값 jQuery
예:

코드 복사 코드는 다음과 같습니다.

$("div.demo").scrollLeft(300)

3. 사이즈

1. 높이()

첫 번째로 일치하는 요소의 현재 계산된 높이 값(px)을 가져옵니다. jQuery 1.2 이후에는 창과 문서의 높이를 얻는 데 사용할 수 있습니다

반환 값 정수
예:

코드 복사 코드는 다음과 같습니다.

/*
//첫 번째 문단의 높이를 구합니다
문서 조각:

안녕하세요

두 번째 단락

*/
경고($("p").높이()); //문서의 높이를 구합니다
경고($(문서).높이())

2. 키(val)

일치하는 각 요소에 대해 CSS 높이(hidth) 속성 값을 설정합니다. 단위를 명시적으로 지정하지 않으면(예: em 또는 %) px가 사용됩니다. 단위를 명시적으로 지정하지 않으면(예: em 또는 %) px가 사용됩니다. 반환값 jQuery

매개변수

val(문자열, 숫자): CSS에서 '높이' 값을 설정합니다
예:

코드 복사 코드는 다음과 같습니다. /*

//모든 문단의 높이를 20으로 설정

문서 조각:

안녕하세요

두 번째 단락

*/
$("p").높이(20)
경고($("p").높이())

3. 너비()

첫 번째로 일치하는 요소의 현재 계산된 너비 값(px)을 가져옵니다. jQuery 1.2 이후에는 창과 문서의 너비를 얻는 데 사용할 수 있습니다 반환 값 정수 예: 0

코드 복사

코드는 다음과 같습니다. /* //첫 번째 문단의 너비를 구합니다

문서 조각:

안녕하세요

두 번째 단락

경고($("p").width());

4. 너비(val)

일치하는 각 요소의 CSS 너비 속성 값을 설정합니다. 단위를 명시적으로 지정하지 않으면(예: em 또는 %) px가 사용됩니다. 반환값 jQuery

매개변수 val(문자열, 숫자): CSS '너비' 속성 값 설정 예:

코드 복사

코드는 다음과 같습니다. /* //모든 문단의 너비를 20으로 설정 문서 조각:

안녕하세요

두 번째 단락

*/ $("p").width(20)

경고($("p").width());

5. 내부 높이() 

첫 번째로 일치하는 요소(패딩 포함 및 테두리 제외)의 내부 영역 높이를 가져옵니다. 이 방법은 보이는 요소와 숨겨진 요소 모두에 적용됩니다. 

반환 값 정수

예:

코드 복사

코드는 다음과 같습니다.

/* //첫 번째 문단의 내부 영역 높이를 구합니다 문서 조각:

안녕하세요

두 번째 단락

*/ var p = $("p:첫 번째") $("p:last").text("innerHeight:" p.innerHeight())

7.innerWidth()

첫 번째로 일치하는 요소(패딩 포함 및 테두리 제외)의 내부 영역 너비를 가져옵니다. 이 방법은 보이는 요소와 숨겨진 요소 모두에 적용됩니다.
반환 값 정수
예:

코드 복사 코드는 다음과 같습니다.

/*
//첫번째 문단의 내부 넓이 구하기
문서 조각:

안녕하세요

두 번째 단락

*/
var p = $("p:첫 번째")
$("p:last").text("innerWidth:" p.innerWidth())

7.외부 높이(옵션)

첫 번째로 일치하는 요소의 외부 높이를 가져옵니다(기본값에는 패딩과 테두리가 포함됨). 이 방법은 보이는 요소와 숨겨진 요소 모두에 적용됩니다.

반환 값 정수
매개변수
options(Boolean): (false) true로 설정하면 여백이 계산에 포함됩니다.
예:

코드 복사 코드는 다음과 같습니다.

/*
//첫 번째 문단의 외부 높이를 구합니다
문서 조각:

안녕하세요

두 번째 단락

*/
var p = $("p:첫 번째")
$("p:last").text("outerHeight:" p.outerHeight() " , externalHeight(true):" p.outerHeight(true));

8.외부 높이(옵션)

첫 번째로 일치하는 요소의 외부 너비를 가져옵니다(기본값에는 패딩과 테두리가 포함됨). 이 방법은 보이는 요소와 숨겨진 요소 모두에 적용됩니다. 반환 값 정수

매개변수

options(Boolean): (false) true로 설정하면 여백이 계산에 포함됩니다.
예:

코드 복사 코드는 다음과 같습니다. /*

//첫 번째 문단의 바깥쪽 너비를 구합니다

문서 조각:

안녕하세요

두 번째 단락

*/
var p = $("p:첫 번째")
$("p:last").text("outerWidth:" p.outerWidth() " , externalWidth(true):" p.outerWidth(true))

위 내용은 jQuery를 운용하는 CSS 스타일, 위치, 크기의 전체 내용입니다. 순전히 개인적인 요약입니다. 누락된 부분이나 오류가 있으면 계속해서 알려주세요.