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

[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)

분류 제목
DOM_Style JS - CSS 스타일 속성값 반환 ★★ + style 객체의 속성 종류
DOM_Style JS - alignContent 속성(C) - 플렉스항목 세로정렬 (= alignContent속성 = 얼라인…
DOM_Style JS - alignItems 속성(C) - 플렉스아이템의 세로정렬방법 지정 (예: 상단정렬/하단정렬/균등배분…
DOM_Style JS - alignSelf 속성(I) - (플렉스아이템 수직정렬. 아이템 자체에 사용. align-self속…
DOM_Style JS - animation 속성 ★ - 애니일체 (= 움직임효과 = 이동효과 = 애니일괄 = 애니효과 = 애…
DOM_Style JS - animationDelay 속성 - 애니지연시간 (= animationDelay속성 = 애니메이션딜…
DOM_Style JS - animationDirection 속성 - 애니방향 (= 움직임방향 = 애니메이션디렉션속성, IE1…
DOM_Style JS - animationDuration 속성 - 애니지속시간 (= 애니완료소요시간 = 움직임완료소요시간 =…
DOM_Style JS - animationFillMode 속성 - 애니 미작동 스타일 (= 애니작동안할때 스타일 = 애니메이…
DOM_Style JS - animationIterationCount 속성 -애니메이션 반복횟수 설정/반환
DOM_Style JS - animationName 속성 - 키프레임명 (= 키프레임이름 = 애니이름 = 애니명 = 애니메이션…
DOM_Style JS - animationTimingFunction 속성 - 애니속도변화 (= 애니속도변경 = 애니속도곡선 …
DOM_Style JS - animationPlayState 속성 - 애니재생상태 (= 애니작동상태설정 = 움직임 재생/멈춤 …
DOM_Style JS - background 속성 ★ - (배경색/배경이미지) 설정/반환 (= background속성 / 백…
DOM_Style JS - backgroundAttachment 속성 ★ - 배경이미지고정 설정/반환
DOM_Style JS - backgroundColor 속성 ★ - 배경색 설정/반환. (= backgroundColor속성 …
DOM_Style JS - backgroundImage 속성 ★ - 배경이미지 설정/반환 (= backgroundImage속성…
DOM_Style JS - backgroundPosition 속성 - 배경이미지위치 설정/반환
DOM_Style JS - backgroundRepeat 속성 - 배경이미지반복 설정/반환
DOM_Style JS - backgroundClip 속성 - 배경 영역 (= backgroundClip속성 = 백그라운드클립…
1/10
목록
찾아주셔서 감사합니다. Since 2012