• 회원가입
  • 로그인
  • 구글아이디로 로그인

[DOM_Style] JS - CSS 스타일 속성값 반환 ★★ + style 객체의 속성 종류

목차

  1. CSS 스타일 속성값 반환
  2. style 객체 정의
  3. style 객체의 속성
  4. style 객체 (접근/생성)

 

CSS 스타일 속성값 반환

[JavaScript 방식]

 

방법1 - (주의: 인라인스타일만 가능.)

var hz = document.getElementById("hz");

var x = hz.style.fontFamily;

 

방법2. ★★★

var hz = document.getElementById("hz");

var x = getComputedStyle(hz).getPropertyValue("font-family");

 

방법3 - 이용 시 불편.

var declaration = document.styleSheets[0].cssRules[0].style; // [object CSSStyleDeclaration]

var x = declaration.getPropertyValue("font-family");

 


[jQuery 방식]

 

var x = $("#hz").css("font-family");

 

PS. 예제보기

 

style 객체 정의

 

style 객체는 개별 스타일 문을 나타냄.

 

 

style 객체의 속성

 

설명 끝의 숫자는 그 속성이 정의된 CSS 버전.
(예: 1:CSS1 / 2:CSS2 / 3:CSS3)


alignContent
항목이 사용 가능한 모든 공간을 사용하지 않을 때flexible container 안의 행 사이 정렬 설정하거나 반환. 3

 

alignItems

flexible container 내부 item들 정렬을 설정하거나 반환. 3

 

alignSelf

flexible container 내부에서 선택된 item 정렬을 설정하거나 반환. 3

 

animation
아래 모든 애니메이션 속성에 대한 단축 속성 (단, animationPlayState 속성 제외). 3

 

animationDelay
애니메이션이 시작될 때를 설정하거나 반환. 3

 

animationDirection
대체 사이클에서 애니메이션이 역방향으로 재생되어야하는지 여부를 설정하거나 반환. 3

 

animationDuration

애니메이션이 한 사이클을 완료하는 데 걸리는 시간 (초 또는 밀리 초)을 설정하거나 반환. 3

 

animationFillMode

실행 시간 이외의 시간에 애니메이션에서 적용할 값 설정 또는 반환. 3

 

animationIterationCount

애니메이션 재생 횟수를 설정하거나 반환. 3

 

animationName

@keyframes animation 이름을 설정 또는 반환. 3

 

animationTimingFunction

애니메이션의 속도 곡선을 설정하거나 반환. 3

 

animationPlayState

애니메이션의 실행 여부 또는 일시 정지 여부를 설정하거나 반환. 3

 

background

하나의 선언에 모든 배경 속성을 설정하거나 반환. 1

 

backgroundAttachment

배경 이미지가 고정되어 있거나 페이지로 스크롤되는지 여부를 설정하거나 반환. 1

 

backgroundColor

요소의 배경색 설정하거나 반환. 1

 

backgroundImage

요소의 배경이미지 설정하거나 반환. 1

 

backgroundPosition

배경이미지의 시작 위치를 설정하거나 반환. 1

 

backgroundRepeat

배경이미지를 반복 (타일링)하는 방법 설정하거나 반환. 1

 

backgroundClip

배경의 페인트 영역을 설정하거나 반환. 3

 

backgroundOrigin

배경이미지의 위치 영역을 설정 또는 설정. 3

 

backgroundSize

배경이미지의 크기를 설정하거나 반환. 3

 

backfaceVisibility

화면을 마주 보지 않을 때 요소를 볼 수 있는지 여부를 설정하거나 반환. 3

 

border

하나의 선언에 borderWidth, borderStyle , borderColor 설정하거나 반환. 1

 

borderBottom

하나의 선언에 모든 borderBottom 속성을 설정하거나 반환. 1

 

borderBottomColor

아래쪽 테두리의 색상을 설정하거나 반환.

 

borderBottomLeftRadius

왼쪽 아래 모서리의 테두리 모양을 설정하거나 설정. 3

 

borderBottomRightRadius

오른쪽 아래 모서리의 테두리 모양을 설정하거나 설정. 3

 

borderBottomStyle

아래쪽 테두리의 스타일을 설정하거나 반환. 1

 

borderBottomWidth

아래쪽 테두리의 너비를 설정하거나 반환. 1

 

borderCollapse

테이블 테두리를 단일 테두리로 축소할지 여부를 설정하거나 반환. 2

 

borderColor

요소 테두리의 색상을 설정하거나 반환 (최대 4개 값 가능). 1

 

borderImage

모든 borderImage 속성을 설정하거나 반환 위한 단축 속성. 3

 

borderImageOutset

테두리 이미지 영역이 경계 상자를 넘어서 확장되는 정도를 설정하거나 설정. 3

 

borderImageRepeat

이미지 테두리를 반복하거나 반올림하거나 늘릴 것인지 여부를 설정하거나 반환. 3

 

borderImageSlice

이미지 테두리 안쪽 여백을 설정하거나 반환. 3

 

borderImageSource 

테두리로 사용할 이미지를 설정하거나 반환. 3

 

borderImageWidth

이미지 테두리 너비를 설정하거나 반환. 3

 

borderLeft

하나의 선언에 모든 borderLeft 속성을 설정하거나 반환. 1

 

borderLeftColor

왼쪽 테두리의 색상을 설정하거나 반환. 1

 

borderLeftStyle

왼쪽 테두리의 스타일을 설정하거나 반환. 1

 

borderLeftWidth

왼쪽 테두리의 너비를 설정하거나 반환. 1

 

borderRadius 

borderRadius 모두 설정 또는 반환 위한 단축 속성 (최대 4개 값 가능). 3

 

borderRight

하나의 선언에 모든 borderRight 속성을 설정하거나 반환. 1

 

borderRightColor

오른쪽 테두리의 색상을 설정하거나 반환. 1

 

borderRightStyle

오른쪽 테두리의 스타일을 설정하거나 반환. 1

 

borderRightWidth

오른쪽 테두리의 너비를 설정하거나 반환. 1

 

borderSpacing

테이블의 셀 사이의 공백을 설정하거나 반환. 2

 

borderStyle

요소 테두리의 스타일을 설정하거나 반환 (최대 4개 값 가능). 1

 

borderTop

하나의 선언에 모든 테두리상단 속성을 설정하거나 반환. 1

 

borderTopColor

테두리상단 색상 설정하거나 반환. 1

 

borderTopLeftRadius

테두리상단 왼쪽 모서리 모양 설정하거나 설정. 3

 

borderTopRightRadius

테두리상단 오른쪽 모서리 모양 설정하거나 설정. 3

 

borderTopStyle

테두리상단스타일을 설정하거나 반환. 1

 

borderTopWidth

테두리상단 두께 설정하거나 반환. 1

 

borderWidth 

테두리 두께 설정하거나 반환 (최대 4 개의 값을 가질 수 있음). 1

 

bottom

배치된 요소의 아래쪽 위치 설정하거나 반환. 2

 

boxDecorationBreak

페이지 나누기 또는 인라인 요소의 경우 라인 브레이크에서 요소의 배경과 테두리의 동작을 설정하거나 반환. 3

 

boxShadow

하나 이상의 그림자를 상자에 부착. 3.

 

boxSizing

특정 요소를 특정 방식으로 영역에 맞게 정의 가능. 3

 

captionSide

테이블 캡션의 위치를 설정하거나 반환. 2

 

clear

부동 객체를 기준으로 요소의 위치를 설정하거나 반환. 1

 

clip

위치 요소의 어느 부분이 표시되는지 설정하거나 반환. 2

 

color

텍스트의 색상을 설정하거나 반환. 1

 

columnCount

요소를 나누어야 하는 열 수를 설정하거나 반환. 3

 

columnFill

열을 채우는 방법을 설정하거나 반환. 3

 

columnGap

열 사이의 간격을 설정하거나 반환. 3

 

columnRule

모든 columnRule 속성을 설정하거나 반환 위한 단축 속성. 3

 

columnRuleColor

열 사이의 rue 색상 설정하거나 반환. 3

 

columnRuleStyle

열 사이의 rule 스타일 설정하거나 설정. 3

 

columnRuleWidth

열 사이의 rule 폭 설정하거나 반환 3

 

columns

columnWidth 및 columnCount 설정 또는 반환 위한 단축 속성. 3

 

columnSpan
요소가 걸쳐 있어야하는 열 수를 설정하거나 반환. 3

 

columnWidth
열의 폭을 설정하거나 반환. 3

 

content
:before 및 : after 의사 요소와 함께 사용해 생성된 내용을 삽입. 2

 

counterIncrement
하나 이상의 카운터를 증가시키기. 2

 

counterReset
하나 이상의 카운터를 만들거나 재설정. 2

 

cursor
마우스커서에 표시할 커서 유형 설정하거나 반환. 2

 

direction

텍스트 방향을 설정하거나 반환. 2

 

display

요소의 표시 유형을 설정하거나 반환. 1

 

emptyCells

빈 셀의 테두리와 배경을 표시할지 여부를 설정하거나 반환. 2

 

filter

이미지 필터 (흐림 및 채도 같은 시각 효과)를 설정하거나 반환. 3

 

flex

나머지에 비례하여 item 길이 설정하거나 반환. 3

 

flexBasis

flex 항목의 초기 길이 설정하거나 반환. 3

 

flexDirection

flex item 방향 설정하거나 반환. 3

 

flexFlow

flexDirection 및 flexWrap 속성에 대한 단축 속성. 3

 

flexGrow

item이 나머지 item에 비해 얼마나 늘어날 지 설정하거나 반환. 3

 

flexShrink

나머지에 비해 item이 축소되는 방식을 설정하거나 반환. 3

 

flexWrap

flex item을 줄 바꿈할지 여부를 설정하거나 반환. 3

 

cssFloat

요소의 수평정렬 설정하거나 반환. 1

 

font

하나의 선언에 fontStyle, fontVariant, fontWeight, fontSize, lineHeight, fontFamily 설정하거나 반환. 1

 

fontFamily

텍스트 글꼴종류 (= 폰트종류) 설정/반환. 1

 

fontSize

텍스트 글꼴크기 (= 폰트크기) 설정/반환. 1

 

fontStyle

글꼴스타일 (= 폰트스타일)이 일반 글꼴, 기울임 글꼴 또는 기울임 글꼴인지 여부를 설정/반환. 1

 

fontVariant

글꼴을 소문자로 표시할지 여부 설정하거나 반환. 1

 

fontWeight

글꼴굵기 (= 폰트굵기) 설정하거나 반환. 1

 

fontSizeAdjust

글꼴 대체가 발생할 때 텍스트의 가독성을 유지. 3

 

fontStretch

font family에서 일반, 압축 또는 확장된 face 선택. 3

 

hangingPunctuation

구두점 문자를 줄 바꿈 상자 외부에 배치 할 수 있는지 여부 지정. 3

 

height

요소 높이 설정하거나 반환. 1

 

hyphens

단락의 레이아웃 개선 위해 단어 분할 방법 설정. 3

 

icon

저자에게 아이콘 등가물로 요소의 스타일할 수있는 기능 제공. 3

 

imageOrientation

사용자 에이전트가 이미지에 적용하는 오른쪽 또는 시계 방향으로의 회전 지정. 3

 

isolation

요소가 새 스택 내용을 만들어야하는지 여부를 정의. 3

 

justifyContent

항목에서 사용 가능한 공간을 모두 사용하지 않을 때 flex container 내부의 item간 정렬 설정하거나 반환. 3

 

left

배치 된 요소의 왼쪽 위치 설정하거나 반환. 2

 

letterSpacing

텍스트의 문자 사이 간격 설정하거나 반환. 1

 

lineHeight

텍스트의 행간 거리 설정하거나 반환. 1

 

listStyle

하나의 선언에 listStyleImage, listStylePosition, listStyleType 설정하거나 반환. 1

 

listStyleImage

이미지를 목록 항목 마커로 설정하거나 반환. 1

 

listStylePosition

목록 항목 마커의 위치를 설정하거나 반환. 1

 

listStyleType

목록 항목 마커 유형을 설정하거나 반환. 1 

 

 

Style 객체 (접근/생성)

https://homzzang.com/b/js-1880


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Math JS - Math.min() 메서드 ★ - 최소값 (= 최솟값 = Math.min메서드 = 매스민메서드)
Math JS - Math.pow() 메서드 ★ - 승수 (= 거듭제곱 = pow메서드 = 매스포우메서드/매스파워메서…
Math JS - Math.random() 메서드 ★ - 랜덤값 (= 임의값 = Math.random메서드 = 매스랜…
Math JS - Math.round() 메서드 ★ - 일반반올림 (= 보통반올림 = Math.round메서드 매스라…
Math JS - Math.sin() 메서드 - 사인값
Math JS - Math.sqrt() 메서드 - 제곱근
Math JS - Math.tan() 메서드 - 탄젠트값
Date JS - Date 객체 - 날짜객체 (속성 + 메서드) 종류 ※Date()함수 = Date함수 = 데이트 함…
Date JS - constructor 속성 - 객체생성자함수 (날짜 경우)
Date JS - prototype 속성(날짜) - 사용자정의 속성/메서드 추가 (날짜객체경우 = 프로토타입)
Date JS - getDate() 메서드 ★ - 일자 얻기 (= getDate메서드 = 겟데이트)
Date JS - getDay() 메서드 - 요일 얻기 (예: 4) (= 요일 추출 = 요일 표시 = getDay메서…
Date JS - getFullYear() 메서드 - 년도 (= 4자리 전체년도얻기 = 겟풀이어)
Date JS - getHours() 메서드 - 시 (= 시얻기 = 시간얻기)
Date JS - getMilliseconds() 메서드 - 밀리초 (= 밀리세컨드)
Date JS - getMinutes() 메서드 - 분 (= 분얻기)
Date JS - getMonth() 메서드 - 월얻기 (= 달얻기 = 달월얻기 = getMonth메서드 = 겟먼스메…
Date JS - getSeconds() 메서드 - 초 얻기 (= 겟세컨즈메서드)
Date JS - getTime() 메서드 ★ - 시간 얻기 (= 타임스탬프얻기 = getTime메서드 = 겟타임메서…
Date JS - getTimezoneOffset() 메서드 - UTC시간과의 시차
11/67
목록
찾아주셔서 감사합니다. Since 2012