HTML DOM Style 객체

Style 객체

Style 객체는 단일 스타일 선언을 대표합니다.

Style 객체 속성

속성 설명
alignContent 엘라스틱 컨테이너 내 행 사이의 정렬 방식을 설정하거나 반환합니다. 항목이 모든 사용 가능한 공간을 사용하지 않을 때.
alignItems 엘라스틱 컨테이너 내 항목의 정렬 방식을 설정하거나 반환합니다.
alignSelf 엘라스틱 컨테이너 내 선택된 항목의 정렬 방식을 설정하거나 반환합니다.
animation 모든 애니메이션 속성의 요약 속성, animationPlayState 속성을 제외합니다.
animationDelay 애니메이션이 언제 시작되어야 하는지 설정하거나 반환합니다.
animationDirection 애니메이션이 반복 순환에서 역방향으로 재생되어야 하는지 설정하거나 반환합니다.
animationDuration 애니메이션이 한 주기를 완료하는 데 필요한 초 또는 밀리초를 설정하거나 반환합니다.
animationFillMode 애니메이션이 실행 시간 이외에 적용되는 값을 설정하거나 반환합니다.
animationIterationCount 애니메이션을 재생할 횟수를 설정하거나 반환합니다.
animationName @keyframes 애니메이션의 이름을 설정하거나 반환합니다.
animationPlayState 애니메이션이 실행 중인지 중지되었는지 설정하거나 반환합니다.
animationTimingFunction 애니메이션의 속도 곡선을 설정하거나 반환합니다.
background 모든 배경 속성을 한 문장에서 설정하거나 반환합니다.
backgroundAttachment 배경 이미지가 고정되었는지 페이지 스크롤에 따라 움직인지 설정하거나 반환합니다.
backgroundClip 배경의 그리기 영역을 설정하거나 반환합니다.
backgroundColor 요소의 배경 색상을 설정하거나 반환합니다.
backgroundImage 요소의 배경 이미지를 설정하거나 반환합니다.
backgroundOrigin 设置或返回背景图像的定位区域。
backgroundPosition 배경 이미지의 정위치 영역을 설정하거나 반환합니다。
backgroundPosition 배경 이미지의 시작 위치를 설정하거나 반환합니다。
backgroundRepeat 배경 이미지를 어떻게 반복할지 설정하거나 반환합니다。（비스테이션）
backgroundSize 배경 이미지의 크기를 설정하거나 반환합니다。
backfaceVisibility 스크린에서는 아닌 요소가 보이는지 설정하거나 반환합니다。
border 테두리 너비, 테두리 스타일 및 테두리 색상을 하나의 선언문에서 설정하거나 반환합니다。
borderBottom 아래 테두리 속성을 하나의 선언문에서 설정하거나 반환합니다。
borderBottomColor 아래 테두리의 색상을 설정하거나 반환합니다。
왼쪽 아래 테두리의 형태를 설정하거나 반환합니다。 borderBottomRightRadius
오른쪽 아래 테두리의 형태를 설정하거나 반환합니다。 아래 테두리의 스타일을 설정하거나 반환합니다。
borderBottomWidth 아래 테두리의 너비를 설정하거나 반환합니다。
borderCollapse 테이블 테두리가 단일 테두리로 축소되어야 하는지 설정하거나 반환합니다。
borderColor 요소 테두리의 색상을 설정하거나 반환합니다。（최대 네 가지 값을 설정할 수 있습니다。）
borderImage borderImage 속성을 설정하거나 반환하는 간단한 속성입니다。
borderImageOutset 테두리 이미지 영역이 테두리 박스를 초과하는 양을 설정하거나 반환합니다。
borderImageRepeat 이미지 테두리가 반복되거나 둘러싸이거나 확장되어야 하는지 설정하거나 반환합니다。
borderImageSlice 이미지 테두리의 내부 이동량을 설정하거나 반환합니다。
borderImageSource 테두리로 사용되는 이미지를 설정하거나 반환합니다。
borderImageWidth 이미지 테두리의 너비를 설정하거나 반환합니다。
borderLeft 왼쪽 테두리 속성을 하나의 선언문에서 설정하거나 반환합니다。
borderLeftColor 왼쪽 테두리의 색상을 설정하거나 반환합니다。
borderLeftStyle 왼쪽 테두리의 스타일을 설정하거나 반환합니다。
borderLeftWidth 왼쪽 테두리의 너비를 설정하거나 반환합니다。
borderRadius 네 개의 borderRadius 속성을 설정하거나 반환하는 간단한 속성입니다。
borderRight borderRight 속성을 하나의 선언문에서 설정하거나 반환합니다。
borderRightColor 右边框的颜色设置或返回。
borderRightStyle 오른쪽 테두리의 스타일을 설정하거나 반환.
borderRightWidth 오른쪽 테두리의 너비를 설정하거나 반환.
borderSpacing 테이블의 셀 사이의 공간을 설정하거나 반환.
borderStyle 요소의 테두리의 스타일을 설정하거나 반환합니다. (최대 네 가지 값을 설정할 수 있습니다.).
borderTop 모든 borderTop 속성을 한 선언으로 설정하거나 반환.
borderTopColor 위 테두리의 색상을 설정하거나 반환.
borderTopLeftRadius 왼쪽 위 모서리 테두리의 형태를 설정하거나 반환.
borderTopRightRadius 오른쪽 위 모서리 테두리의 형태를 설정하거나 반환.
borderTopStyle 위 테두리의 스타일을 설정하거나 반환.
borderTopWidth 위 테두리의 너비를 설정하거나 반환.
borderWidth 요소의 테두리의 너비를 설정하거나 반환합니다. (최대 네 가지 값을 설정할 수 있습니다.).
bottom 정위치된 요소의 아래 위치를 설정하거나 반환。
boxDecorationBreak 요소가 페이지를 나누거나, 행 내에서 줄 바꿈할 때 배경과 테두리의 동작을 설정하거나 반환。
boxShadow 한 개 또는 여러 개의 그림자를 상자에 추가합니다。
boxSizing 특정 요소가 어떤 공간에 어떤 방식으로 맞춰져야 하는지 정의할 수 있음。
captionSide 테이블 제목의 위치를 설정하거나 반환。
caretColor 요소의 삽입 기호/커서의 색상을 설정하거나 반환。
clear floated 요소에 비해 요소의 위치를 설정하거나 반환。
clip 정위치된 요소의 어떤 부분이 보이는지 설정하거나 반환。
color 설정하거나 반환하는 텍스트의 색상。
columnCount 요소가 어떤 열로 나누어져야 할지 설정하거나 반환。
columnFill 설정 또는 반환 열에 어떻게 채울지。
columnGap 설정 또는 반환 열 사이의 간격。
columnRule 모든 columnRule 속성을 설정하거나 반환하는 간소화된 속성。
columnRuleColor 설정 또는 반환 열 사이의 규칙적인 색상。
columnRuleStyle 설정 또는 반환 열 사이의 규칙적인 스타일。
columnRuleWidth 설정 또는 반환 열 사이의 규칙적인 너비。
columns columnWidth와 columnCount를 설정하거나 반환하는 간소화된 속성。
columnSpan 설정 또는 반환 요소가 얼마나 열을 건너뛰어야 할지。
columnWidth 설정 또는 반환 열의 너비。
content :before와 :after 페르소나 엘리먼트와 함께 사용하여 생성된 내용을 삽입합니다.
counterIncrement 한 개나 여러 개의 계산기를 증가시킵니다.
counterReset 한 개나 여러 개의 계산기를 생성하거나 초기화합니다.
cursor 마우스 포인터가 표시할 수 있는 커서 유형을 설정하거나 반환합니다.
direction 텍스트 방향을 설정하거나 반환합니다.
display 요소의 표시 유형을 설정하거나 반환합니다.
emptyCells 빈 셀의 경계선과 배경을 표시할지 설정하거나 반환합니다.
filter 이미지 필터(가려짐, 채도와 같은 시각적 효과)를 설정하거나 반환합니다.
flex 항목의 길이를 설정하거나 반환합니다. 나머지 부분에 비해 상대적입니다.
flexBasis 확장 항목의 초기 길이를 설정하거나 반환합니다.
flexDirection 확장 항목의 방향을 설정하거나 반환합니다.
flexFlow flexDirection과 flexWrap 속성의 줄임말입니다.
flexGrow 항목이 다른 항목에 비해 증가량을 설정하거나 반환합니다.
flexShrink 항목이 다른 항목에 비해 축소 방식을 설정하거나 반환합니다.
flexWrap 확장 항목이 줄 바꿈되어야 하는지 설정하거나 반환합니다.
cssFloat 요소의 수평 정렬 방식을 설정하거나 반환합니다.
font 한 줄의 선언에서 글꼴 속성을 설정하거나 반환합니다.
fontFamily 텍스트의 글꼴 가족을 설정하거나 반환합니다.
fontSize 텍스트의 글꼴 크기를 설정하거나 반환합니다.
fontStyle 글꼴의 스타일이 normal, italic, oblique 중 하나인지 설정하거나 반환합니다.
fontVariant 소형 대문자로 표시되어야 하는지 설정하거나 반환합니다.
fontWeight 글꼴의 두께를 설정하거나 반환합니다.
fontSizeAdjust 글꼴 되돌림이 발생할 때도 텍스트의 읽기 쉬움을 유지합니다.
fontStretch 글꼴 시리즈에서 확장 변형 방식을 선택합니다.
hangingPunctuation 문자열이 줄 바깥에 위치할 수 있는지 정의합니다.
height 요소의 높이를 설정하거나 반환합니다.
hyphens 단락 레이아웃을 개선하기 위해 단어를 어떻게 분할할지 설정합니다.
icon 저자가 요소의 스타일을 기호적 대체물로 설정할 수 있도록 합니다.
imageOrientation 사용자代理가 이미지에 적용할 수 있는 오른쪽 또는 시계 방향의 회전을 정의합니다.
isolation 요소가 새로운 스택 내용을 생성해야 하는지 정의합니다.
justifyContent 전체 사용 가능한 공간을 사용하지 않았을 때, 확장 가능 컨테이너 내 항목 간의 정렬 방식을 설정하거나 반환합니다.
left 위치 요소의 왼쪽 위치를 설정하거나 반환합니다.
letterSpacing 텍스트에서 문자 사이의 간격을 설정하거나 반환합니다.
lineHeight 텍스트에서 행 사이의 거리를 설정하거나 반환합니다.
listStyle 리스트 스타일을 한 문장에서 설정하거나 반환합니다.
listStyleImage 이미지를 리스트 아이템 표시기로 사용합니다.
listStylePosition 리스트 아이템 표시기의 위치를 설정하거나 반환합니다.
listStyleType 리스트 아이템 표시기의 유형을 설정하거나 반환합니다.
margin 요소의 외경을 설정하거나 반환합니다. 최대 네 가지 값을 설정할 수 있습니다.
marginBottom 요소의 하단 외경을 설정하거나 반환합니다.
marginLeft 요소의 왼쪽 외경을 설정하거나 반환합니다.
marginRight 요소의 오른쪽 외경을 설정하거나 반환합니다.
marginTop 요소의 상단 외경을 설정하거나 반환합니다.
maxHeight 요소의 최대 높이를 설정하거나 반환합니다.
maxWidth 요소의 최대 너비를 설정하거나 반환합니다.
minHeight 요소의 최소 높이를 설정하거나 반환합니다.
minWidth 요소의 최소 너비를 설정하거나 반환합니다.
navDown 아래로 이동하는 키를 사용할 때의 탐색 위치를 설정하거나 반환합니다.
navIndex 요소의 탐색 순서를 설정하거나 반환합니다.
navLeft 왼쪽으로 이동하는 키를 사용할 때의 탐색 위치를 설정하거나 반환합니다.
navRight 오른쪽으로 이동하는 키를 사용할 때의 탐색 위치를 설정하거나 반환합니다.
navUp 위상 아래로 이동하는 키를 사용할 때의 탐색 위치를 설정하거나 반환합니다.
objectFit 대체 요소의 내용이 사용된 높이와 너비에 따라 어떻게 맞춰져야 하는지 지정합니다.
objectPosition 대체 요소가 그 프레임 내에 어떻게 정렬되는지 지정합니다.
opacity 요소의 불투명도 수준을 설정하거나 반환합니다.
order 플렉시블 아이템이 나머지 아이템에 비해 순서를 설정하거나 반환합니다.
orphans 요소 내부에서 페이지를 넘기는 경우에도 페이지 하단에 남아야 하는 요소의 최소 행 수를 설정하거나 반환합니다.
outline 모든 outline 속성을 한 문장에서 설정하거나 반환합니다.
outlineColor 요소 주위의 경계선의 색상을 설정하거나 반환합니다.
outlineOffset 경계선을 이동시키고, 경계선 밖에 그립니다.
outlineStyle 요소 주위의 경계선의 스타일을 설정하거나 반환합니다.
outlineWidth 요소 주위의 경계선의 너비를 설정하거나 반환합니다.
overflow 요소의 프레임 밖에 나타나는 내용을 처리하는 방법을 설정하거나 반환합니다.
overflowX 콘텐츠의 왼쪽/오른쪽 경계를 처리하는 방법을 정의합니다. 그 경계가 요소의 내용 영역을 벗어나면.
overflowY 요소의 상/하 경계에서 내용이 요소의 내용 영역을 초과할 때 어떻게 처리되는지 지정합니다.
padding 요소의 내쪽 여백을 설정하거나 반환합니다.(최대 네 가지 값으로 설정할 수 있습니다.).
paddingBottom 요소의 하단 내쪽 여백을 설정하거나 반환합니다.
paddingLeft 요소의 왼쪽 내쪽 여백을 설정하거나 반환합니다.
paddingRight 요소의 오른쪽 내쪽 여백을 설정하거나 반환합니다.
paddingTop 요소의 상단 내쪽 여백을 설정하거나 반환합니다.
pageBreakAfter 요소 뒤의 페이지 분할 행동을 설정하거나 반환합니다.
pageBreakBefore 요소 앞의 페이지 분할 행동을 설정하거나 반환합니다.
pageBreakInside 요소 내의 페이지 분할 행동을 설정하거나 반환합니다.
perspective 3D 요소를 어떻게 볼지에 대한 정보를 설정하거나 반환합니다.
perspectiveOrigin 3D 요소의 하단 위치를 설정하거나 반환합니다.
position 요소의 정위치 방법의 유형(정적, 상대적, 절대적 또는 고정적)을 설정하거나 반환합니다.
quotes 내장된 쌍따옴표의 따옴표 유형을 설정하거나 반환합니다.
resize 요소가 사용자에 의해 크기를 조절할 수 있는지 설정하거나 반환합니다.
right 정위치된 요소의 오른쪽 위치를 설정하거나 반환합니다.
scrollBehavior 사용자가 스크롤 가능 텍스트 박스 내의 링크를 클릭할 때, 직접 이동하는 대신 부드럽게 스크롤되는 애니메이션 효과가 있는지 결정합니다.
tableLayout 테이블 셀, 행, 열의 레이아웃 방식을 설정하거나 반환합니다.
tabSize 탭의 길이를 설정하거나 반환합니다.
textAlign 텍스트의 수평 정렬 방식을 설정하거나 반환합니다.
textAlignLast text-align이 "justify"인 경우, 블록의 마지막 행이나 강제 줄바꿈 전의 행이 어떻게 정렬되어야 하는지 설정하거나 반환합니다.
textDecoration 텍스트 장식을 설정하거나 반환합니다.
textDecorationColor 텍스트 장식의 색상을 설정하거나 반환합니다.
textDecorationLine 텍스트 장식 중 행 유형을 설정하거나 반환합니다.
textDecorationStyle 텍스트 장식 중 선의 스타일을 설정하거나 반환합니다.
textIndent 첫 번째 행 텍스트의 들여쓰기를 설정하거나 반환합니다.
textJustify text-align을 "justify"로 설정할 때 사용하는 정렬 방법을 설정하거나 반환합니다.
textOverflow 텍스트가 포함된 요소에 흐름할 때 발생해야 할 일을 설정하거나 반환합니다.
textShadow 텍스트의 그림자 효과를 설정하거나 반환합니다.
textTransform 텍스트의 대소문자를 설정하거나 반환합니다.
top 정위치된 요소의 상단 위치를 설정하거나 반환합니다.
transform 2D나 3D 변환을 요소에 적용합니다.
transformOrigin 변환된 요소의 위치를 설정하거나 반환합니다.
transformStyle 3D 공간에서 내장된 요소의 렌더링 방식을 설정하거나 반환합니다.
transition 네 개의 변환 속성을 설정하거나 반환하는 간단한 속성입니다.
transitionProperty 트랜지션 효과의 CSS 속성을 설정하거나 반환합니다.
transitionDuration 트랜지션 효과가 완료되기까지 필요한 초나 밀리초를 설정하거나 반환합니다.
transitionTimingFunction 트랜지션 효과의 속도 곡선을 설정하거나 반환합니다.
transitionDelay 트랜지션 효과가 언제 시작되는지 설정하거나 반환합니다.
unicodeBidi 동일한 문서 내에서 여러 언어를 지원하기 위해 텍스트를 덮어쓰도록 설정하거나 반환합니다.
userSelect 요소의 텍스트를 선택할 수 있는지 여부를 설정하거나 반환합니다.
verticalAlign 요소 내의 내용의 수직 정렬 방식을 설정하거나 반환합니다.
visibility 요소가 보이는지 여부를 설정하거나 반환합니다.
whiteSpace 문자 속의 탭, 줄 바꿈, 공백을 처리하는 방법을 설정하거나 반환합니다.
width 요소의 너비를 설정하거나 반환합니다.
wordBreak CJK脚本以外의 언어의 줄 바꿈 규칙을 설정하거나 반환합니다.
wordSpacing 문자 속의 단어 간격을 설정하거나 반환합니다.
wordWrap 긴, 끊기지 않는 단어를 다음 줄로 이동시키는 것을 허용합니다.
widows 화면 상단에 보이도록해야 할 요소의 최소 행 수를 설정하거나 반환합니다.
zIndex 정위치된 요소의 스택 순서를 설정하거나 반환합니다.

스타일 객체에 접근

문서의 head 부분이나 특정 HTML 요소에서 스타일 객체에 접근할 수 있습니다.

예제 1

문서의 head 부분에서 스타일 객체에 접근:

var x = document.getElementsByTagName("STYLE");

직접 시도해 보세요

예제 2

지정된 요소의 스타일 객체에 접근:

var x = document.getElementById("myH1").style;

직접 시도해 보세요

Style 객체 생성

예제 1

您可以使用 document.createElement() 方法创建 <style> 元소:

var x = document.createElement("STYLE");

직접 시도해 보세요

예제 2

기존 요소의 스타일 속성을 설정할 수도 있습니다:

document.getElementById("myH1").style.color = "red";

직접 시도해 보세요

관련 페이지

HTML 교본:HTML CSS

CSS 교본:CSS 교본

HTML 참조 설명서:HTML <style> 태그

CSS 참조 설명서:CSS 속성