Juqery 학습 6 CSS--css, 위치, 너비 및 height_jquery

css(name)
첫 번째로 일치하는 요소의 스타일 속성에 액세스합니다.

------------------------------- ------ ----------

반품
반환값
문자열

매개변수
이름(문자열): 액세스할 속성의 이름

예
첫 번째 단락 값의 색상 스타일 속성을 가져옵니다.

jQuery 코드:

$("p").css("color")
---- ------------------------------------- ------------------------------------- ----------------
css(properties)
"이름/값 쌍" 객체를 모두로 설정 요소의 스타일 속성과 일치합니다.
이것은 일치하는 모든 요소에 많은 수의 스타일 속성을 설정하는 가장 좋은 방법입니다.

------------------------------- ------ ----------

설정 일치하는 모든 요소에 대한 스타일 속성인 키/값 객체.
반환 값
jQuery

매개변수
속성을 설정하는 가장 좋은 방법입니다. (지도): 스타일 속성에 대한 이름/값 쌍을 설정하려면

예시
에서 모든 단락의 글꼴 색상을 빨간색으로, 배경을 파란색으로 설정합니다.

jQuery 코드:

$("p").css({ color: "#ff0011", background: "blue" })

---- ------------------------------------- -------------

속성 이름에 "-"가 포함된 경우 따옴표를 사용해야 합니다.

jQuery 코드:

$("p").css({ "margin-left": "10px", "ground-color": "blue" })
--- -- ------------------------------------------------ -- ------------------------------------------------ -- ---------------------------
css(이름,값 )
일치하는 모든 요소에 스타일 속성 값을 설정합니다.
숫자는 자동으로 픽셀 값으로 변환됩니다

----------------------------------- - ---------------------

일치하는 모든 요소의 값으로 단일 스타일 속성을 설정합니다.
숫자가 제공되면
반환 값
jQuery

매개변수
이름(값): 속성 이름

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

예
모든 단락 글꼴을 빨간색으로 설정

jQuery 코드 :

$("p").css("color","red")
--------- - ------------------------------------------------- - ------------------------------------------------- - ---------------------
offset()
현재 뷰포트에서 일치하는 요소의 상대 오프셋을 가져옵니다.
반환된 객체에는 top과 left라는 두 가지 정수 속성이 포함되어 있습니다. 이 방법은 보이는 요소에만 작동합니다.

------------------------------- ------ ----------

받기 뷰포트를 기준으로 첫 번째로 일치하는 요소의 현재 오프셋입니다.
반환된 개체에는 top과 left의 두 가지 정수 속성이 포함되어 있습니다.
반환 값
Object{top,left}

예
두 번째 단락의 오프셋 가져오기

HTML 코드:


Hello

두 번째 단락

jQuery 코드:

var p = $("p:last");
var offset = p.offset()
p.html( "left: " offset.left ", top: " offset.top );
결과:


안녕하세요

왼쪽: 0, 위쪽: 35

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

------------------------- ---- --------------------------------- ---- --

첫 번째로 일치하는 요소의 현재 계산된 픽셀, 높이를 가져옵니다.
jQuery 1.2에서 이 메서드는 창과 문서의 높이를 찾을 수 있습니다
. 반환 값
정수

예
첫 번째 단락의 높이 가져오기

jQuery 코드:

$("p").height(); 🎜>
-------------------------------- ----- ----------------

문서 높이 가져오기

jQuery 코드:

$(document).height();
모든 단락의 높이를 20으로 설정:

jQuery 코드:

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

------------------------- ---- --------------------------------- ---- --

첫 번째로 일치하는 요소의 현재 계산된 픽셀, 너비를 가져옵니다.
jQuery 1.2에서 이 메서드는 창과 문서의 너비를 찾을 수 있습니다.
반환 값
정수

예
첫 번째 문단의 너비를 가져옵니다

jQuery 코드:

$("p").width(); 🎜>
-------------------------------- ----- ------------------

현재 창의 너비를 가져옵니다

jQuery 코드:

$(window).width()
모든 단락의 너비를 20으로 설정:

jQuery 코드:

$("p").width (20);