카스케이딩된 공통 스타일쉬트나 인라인 스타일쉬트, HTML 속성들의 적용되는 최종 스타일쉬트의 내용을 대표한다.

Script [propVal=]..propName;
HTML 없다.
특기

style 개체는 속성으로 인라인 스타일로 지정된 스타일 만을 반환하는데 반해 currentStyle 개체는 엘레멘트의 캐스케이트된 스타일을 반환한다. 따라서 currentStyle 개체와 style 개체에서 반환되는 스타일은 다를 수 있다.
예를들어 color 속성이 인라인이 아니고 문단에 연결(linked)이나 스타일쉬트(stylesheet)에 지정되었다면 currentStyle.color 속성은 색상값을 반환하지만 style.color는 반환값이 없다.
그러나 그 문단에 <P style="color:blue">로 색상이 지정되었다면 currentStylestyle 개체는 모두 색상값 blue를 반환한다.

currentStyle 개체는 다음과 같은 우선 순위로 카스케이딩된다.

  1. 인라인 스타일
  2. 스타일쉬트(stylesheet) 명령(rule)
  3. HTML 애트리뷰트
  4. HTML 태그 자체의 정의된 특성

따라서 스타일쉬트 <B> 태그에 normal로 지정되었으면 currentStyle 개체는 fontWeight 값을 normal로 반환할 것이다.

currentStyle 개체는 문서의 설정된 스타일이 적용된 값들을 반환하고, 값이 반환된 싯점에서 표현되는 값을 반영하지 않을 수 있다. 예를들어 스타일 속성값 "color:blue; display:none"을 가진 개체가 문서상에 표현되지 않더라도 currentStyle.colorblue로 반환하고 currentStyle 개체 내용의 표현에 반영되지 않는다. 스타일쉬트의 disabledcurrentStyle 값에 영향을 주지 않는다.

반환값은 그 개체에 지정된 단위로 반환한다. 예를들어 개체에 인라인 스타일 style="color:blue"으로 지정하였으면 object.currentStyle.color는 RGB 색상값 #0000FF로 반환하지 않고 blue로 반환한다.

currentStyle 개체는 스타일 명령(rule) 속에 사용자 정의 속성들을 지원한다. 예제 참조.

currentStyle 개체는 비동기적이다. 이는 설정할 수 없고 원래의 값 대신 즉시 가져온다는 의미이다. 따라서 addImport 메서드등 스크립트로 currentStyle을 얻기 위해서는 그 메서드를 호출하고 currentStyle를 검정하는 기능이 포함되어야 한다. 문서가 로딩되는 동안 currentStyle를 검정하기 위해서는 body 엘레멘트가 로딩되고 표현될 때까지 기다려야 한다. 그 전에는 currentStyle 값이 다를 수 있다.

IE5 부터는 스크립트를 사용할 수 있다.

적용
개체scriptHTML규격IE
참조
style style

설명을 위한 예제

예제 문자열

blockDirection 속성 IE (blockDirection=sVal> 애트리뷰트)
⇒ 개체의 내용이 오른쪽에서 윈쪽으로 혹은 왼쪽에서 오른쪽으로 흐를 것인가를 문자열로 반환한다.
문법: [sVal=].blockDirection
코드: document.write(oObj.blockDirection); 결과:
clipBottom 속성 IE
⇒ 잘라낸 지역의 개체 바닥 좌표를 반환한다.
문법: [sVal=].clipBottom
코드: document.write(oObj.clipBottom); 결과:
onOffBehavior 속성 IE
⇒ 지정된 MS DirectAnimation® 비헤이버(behavior)가 돌아가는지를 나타내는 개체를 반환한다.
문법: .onOffBehavior[=true|false]
코드: document.write(oObj.onOffBehavior); 결과:

stylescript
{accelerator:val} obj.style.accelerator[=val]
⇒ 개체가 단축키를 가지고 있는가를 부울값으로 반환하거나 설정한다.
{background-attachment:val} obj.style.backgroundAttachment[=val]
⇒ 문서 속의 배경 이미지를 개체에 배열 방식을 반환하거나 설정한다.
{background-color:val} obj.style.backgroundColor[=val]
⇒ 개체의 배경에 깔리는 색상을 반환하거나 설정한다.
{background-image:val} obj.style.backgroundImage[=val]
⇒ 개체의 배경 이미지를 반환하거나 설정한다 .
{background-position-x:val} obj.style.backgroundPositionX[=val]
backgroundPosition 속성의 x 좌표를 반환하거나 설정한다.
{background-position-y:val} obj.style.backgroundPositionY[=val]
backgroundPosition 속성의 y 좌표를 반환하거나 설정한다.
{background-repeat:val} obj.style.backgroundRepeat[=val]
⇒ 개체 backgroundImage 속성의 반복 방식을 반환하거나 설정한다.
{behavior:val} obj.style.behavior[=val]
⇒ DHTML behavior의 소개 위치를 반환하거나 설정한다.
{border-bottom-color:val} obj.style.borderBottomColor[=val]
⇒ 개체의 바닥 테두리의 색상을 반환하거나 설정한다.
{border-bottom-style:val} obj.style.borderBottomStyle[=val]
⇒ 개체의 바닥 테두리 형태를 반환하거나 설정한다.
{border-bottom-width:val} obj.style.borderBottomWidth[=val]
⇒ 개체의 바닥 테두리의 두께를 반환하거나 설정한다.
{border-collapse:val} obj.style.borderCollapse[=val]
⇒ 테이블의 줄이나 칸의 테두리가 서로 합해지는가를 분리되는가 나타내는 값을 반환하거나 설정한다.
{border-color:val} obj.style.borderColor[=val]
⇒ 개체의 테두리 색상들을 반환하거나 설정한다.
{border-left-color:val} obj.style.borderLeftColor[=val]
⇒ 개체 왼쪽 테두리의 색상을 반환하거나 설정한다.
{border-left-style:val} obj.style.borderLeftStyle[=val]
⇒ 개체 왼쪽 테두리의 형태를 반환하거나 설정한다.
{border-left-width:val} obj.style.borderLeftWidth[=val]
⇒개체 왼쪽 테두리의 두께를 반환하거나 설정한다.
{border-right-color:val} obj.style.borderRightColor[=val]
⇒ 개체 오른쪽 테두리의 색상을 반환하거나 설정한다.
{border-right-style:val} obj.style.borderRightStyle[=val]
⇒ 개체 오른쪽 테두리의 형태를 반환하거나 설정한다.
{border-right-width:val} obj.style.borderRightWidth[=val]
⇒ 개체 오른쪽 테두리의 두께를 반환하거나 설정한다.
{border-top:val} obj.style.borderTop[=val]
⇒ 개체 위쪽 테두리의 속성들을 반환하거나 설정한다.
{border-top-color:val} obj.style.borderTopColor[=val]
{border-top-style:val} obj.style.borderTopStyle[=val]
⇒ 개체 위쪽 테두리의 형태를 반환하거나 설정한다.
{border-top-width:val} obj.style.borderTopWidth[=val]
⇒ 개체 위쪽 테두리의 두께를 반환하거나 설정한다.
{border-width:val} obj.style.borderWidth[=val]
⇒ 개체의 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리들의 두께를 일괄적으로 반환하거나 설정한다.
{bottom:val} obj.style.bottom
⇒ 개체 체계도상 아래쪽 개체와의 거리를 반환한다.
{clear:val} obj.style.clear
⇒ 개체에서 부동(float)부분의 면의 왼쪽, 오른쪽 혹은 양쪽으로 표현이 허용하는가를 반환한다.
없슴 obj.style.clipLeft
⇒ 개체의 잘려지는 부분 왼쪽 좌표를 반환한다.
없슴 obj.style.clipRight
⇒ 개체의 잘려지는 부분 오른쪽 좌표를 반환한다.
없슴 obj.style.clipTop
⇒ 개체의 잘려지는 부분 위쪽 좌표를 반환한다.
{color:val} obj.style.color
⇒ 개체의 글자 색상을 반환한다.
{cursor:val} obj.style.cursor[=val]
⇒ 개체위에서 마우스 포인터의 보이는 형태를 반환하거나 설정한다.
{direction:val} obj.style.direction[=val]
⇒ 개체의 읽는 순서를 반환하거나 설정한다.
{display:val} obj.style.display[=val]
⇒ 개체를 디스플레이할 것인가를 반환하거나 설정한다.
{font-family:val} obj.style.fontFamily
⇒ 사용한 글꼴의 이름들을 반환한다.
{font-size:val} obj.style.fontSize[=val]
⇒ 개체 텍스트에서 사용한 글꼴의 크기를 나타내는 수치를 반환하거나 설정한다.
{font-style:val} obj.style.fontStyle[=val]
⇒ 개체의 글꼴 형태을 italic, normal, oblique등으로 반환하거나 설정한다.
{font-variant:val} obj.style.fontVariant[=val]
⇒ 개체의 문자를 작은 대문자들로 변형할 것인가를 반환하거나 설정한다.
{font-weight:val} obj.style.fontWeight[=val]
⇒ 개체의 글꼴 두께를 반환하거나 설정한다.
없슴 obj.style.hasLayout
⇒ 개체가 레이아웃(layout)을 가지고 있는가를 부울값으로 반환한다.
{height:val} obj.style.height
⇒ 개체의 높이를 반환한다.
{ime-mode:val} obj.style.imeMode[=val]
⇒ 개체의 입력 방식 편집(IME : Input Method Editor)을 반환하거나 설정한다.
{layout-flow:val} obj.style.layoutFlow
⇒ 개체 내용의 방향이나 흐름방향을 반환한다.
{layout-grid-char:val} obj.style.layoutGridChar[=val]
⇒ 엘레멘트듸 내용 문자를 표현하기 위하여 사용된 글자 그리드의 크기를 반환하거나 설정한다.
{layout-grid-line:val} obj.style.layoutGridLine[=val]
⇒ 엘레멘트듸 내용 문자를 표현하기 위하여 사용된 글자 그리드 줄 값을 반환하거나 설정한다.
{layout-grid-mode:val} obj.style.layoutGridMode[=val]
⇒ 텍스트 레이아웃 그리드에 가로, 세로가 사용되었는가를 반환하거나 설정한다
{layout-grid-type:val} obj.style.layoutGridType[=val]
⇒ 엘레멘트듸 내용 문자를 표현하기 위하여 사용된 그리드의 종류를 반환하거나 설정한다.
{left:val} obj.style.left
⇒ 개체 체계도상 왼쪽 개체와의 거리를 반환한다.
{letter-spacing:val} obj.style.letterSpacing[=val]
⇒ 개체 속에서 글자들 사이의 간격을 반환하거나 설정한다.
{line-break:val} obj.style.lineBreak[=val]
⇒ 일본어 텍스트에서 줄자름(line-breaking) 명령(rule)을 반환하거나 설정한다.
{line-height:val} obj.style.lineHeight[=val]
⇒ 개체 속에서 줄과 아래줄과의 거리를 반환하거나 설정한다.
{list-style-image:val} obj.style.listStyleImage[=val]
⇒ 개체의 목록 스타일(listStyle)에 사용되는 이미지 주소를 반환하거나 설정한다.
{list-style-position:val} obj.style.listStylePosition[=val]
⇒ 개체의 목록 스타일에 사용되는 항목 표시자의 위치를 개체의 내용에 상대적인 위치로 반환하거나 설정한다.
{list-style-type:val} obj.style.listStyleType[=val]
⇒ 개체의 목록 스타일에 사용되는 항목 표시자의 정해진 형태를 반환하거나 설정한다.
{margin:val} obj.style.margin[=val]
⇒ 개체의 위쪽, 오른쪽, 아래쪽, 왼쪽 마진(주변 개체와의 간격)들의 두께를 일괄적으로 반환하거나 설정한다.
{margin-bottom:val} obj.style.marginBottom[=val]
⇒ 개체의 아래쪽 마진 두께을 반환하거나 설정한다.
{margin-left:val} obj.style.marginLeft[=val]
⇒ 개체의 왼쪽 마진 두께을 반환하거나 설정한다.
{margin-right:val} obj.style.marginRight[=val]
⇒ 개체의 오른쪽 마진 두께을 반환하거나 설정한다.
{margin-top:val} obj.style.marginTop[=val]
⇒ 개체의 위쪽 마진 두께을 반환하거나 설정한다.
{min-height:val} [val=]obj.style.minHeight
IE6 개체의 최소 높이를 반환한다.
{overflow:val} obj.style.overflow[=val]
⇒ 개체의 내용이 높이나 너비를 초과하였을 때 어떻게 처리할 것인가를 나타내는 값을 반환하거나 설정한다.
{overflow-x:val} obj.style.overflowX[=val]
⇒ 개체의 내용이 너비를 초과하였을 때 그 내용을 어떻게 처리할 것인가를 나타니는 값을 반환하거나 설정한다.
{overflow-y:val} obj.style.overflowY[=val]
⇒ 개체의 내용이 높이를 초과하였을 때 그 내용을 어떻게 처리할 것인가를 나타니는 값을 반환하거나 설정한다.
{padding:val} obj.style.padding[=val]
⇒ 개체들 사이, 그들에 소속된 마진, 보더까지의 간격을 반환하거나 설정한다.
{padding-bottom:val} obj.style.paddingBottom[=val]
⇒ 개체의 아래쪽 보더와 내용 사이의 간격을 반환하거나 설정한다.
{padding-left:val} obj.style.paddingLeft[=val]
⇒ 개체의 왼쪽 보더와 내용 사이의 간격을 반환하거나 설정한다.
{padding-right:val} obj.style.paddingRight[=val]
⇒ 개체의 오른쪽 보더와 내용 사이의 간격을 반환하거나 설정한다.
{padding-top:val} obj.style.paddingTop[=val]
⇒ 개체의 위쪽 보더와 내용 사이의 간격을 반환하거나 설정한다.
{page-break-after:val} [val=]obj.style.pageBreakAfter
⇒ 개체 다음에 페이지 바꿈할 것인가를 반환한다.
{page-break-before:val} [val=]obj.style.pageBreakBefore
⇒ 개체 전에 페이지 바꿈할 것인가를 반환한다.
{position:val} obj.style.position
⇒ 개체의 위치시킴 방식을 반환한다.
{right:val} obj.style.right
⇒ 개체 체계도상 오른쪽 개체와의 거리를 반환한다.
{ruby-align:val} [val=]obj.style.rubyAlign
rt 개체에 지정된 루비(ruby) 텍스트의 위치를 반환한다.
{ruby-overhang:val} [val=]obj.style.rubyOverhang
rt 개체에 지정된 루비(ruby) 텍스트의 위치를 반환한다.
{ruby-position:val} [val=]obj.style.rubyPosition
rt 개체에 지정된 루비(ruby) 텍스트의 위치를 반환한다.
{scrollbar-3dlight-color:val} obj.style.scrollbar3dLightColor[=val]
⇒ 스크롤 박스와 스크롤바 화살의 위쪽면과 왼쪽면의 색상을 반환하거나 설정한다.
{scrollbar-arrow-color:val} obj.style.scrollbarArrowColor[=val]
⇒ 스크롤바의 화살의 색상을 반환하거나 설정한다.
{scrollbar-base-color:val} [val=]obj.style.scrollbarBaseColor
⇒ 스크롤바의 기본 색상(스크롤바, 스크롤 박스, 트랙, 화살)을 반환한다.
{scrollbar-darkshadow-color:val} obj.style.scrollbarDarkShadowColor[=val]
⇒ 스크롤바의 색상을 반환하거나 설정한다.
{scrollbar-face-color:val} obj.style.scrollbarFaceColor[=val]
⇒ 스크롤 박스와 스크롤바의 화살의 색상을 반환하거나 설정한다.
{scrollbar-highlight-color:val} obj.style.scrollbarHighlightColor[=val]
⇒ 스크롤 박스와 스크롤바 화살의 위쪽면과 왼쪽면의 색상을 반환하거나 설정한다.
{scrollbar-shadow-color:val} obj.style.scrollbarShadowColor[=val]
⇒ 스크롤 박스와 스크롤바 화살의 아래쪽면과 오른쪽면의 색상을 반환하거나 설정한다.
{scrollbar-track-color:val} obj.style.scrollbarTrackColor[=val]
⇒ 스크롤바 트랙(track) 엘레멘트의 색상을 반환하거나 설정한다.
{float:val} obj.style.styleFloat
⇒ 개체에서 어느 방향으로 텍스트가 흐를 것인가를 반환한다.
{table-layout:val} [val=]obj.style.tableLayout
⇒ 테이블 레이아웃이 고정되어 있는가를 나타내는 문자열을 반환한다.
{text-align:val} [val=]obj.style.textAlign
⇒ 개체 속의 문자나 개체의 수평 정렬 방식(left, right, center, justified)을 반환한다.
{text-align-last:val} [val=]obj.style.textAlignLast
⇒ 개체 속의 문자나 개체 마지막 줄의 수평 정렬 방식을 반환한다.
{text-autospace:val} [val=]obj.style.textAutospace
⇒ 조정된 문자를 위한 자동 문자 간격 맞추기를 반환한다.
{text-decoration:val} [val=]obj.style.textDecoration
⇒ 개체 속의 문자 장식(깜박거림, 중간줄, 윗줄, 아랫줄)을 반환한다.
{text-indent:val} [val=]obj.style.textIndent
⇒ 개체 속에서 문자의 첫 글자를 들어쓰기 하는 정도를 반환한다.
{text-justify:val} [val=]obj.style.textJustify
⇒ 개체 속의 문자에 사용된 정렬 방식을 반환한다 .
{text-kashida-space:val} [val=]obj.style.textKashidaSpace
⇒ 개체 속에서 문자 정렬 방식을 사용할 때 공백 표시에 kashida 비율을 반환한다. 아랍어에서 사용된다.
{text-overflow:val} [val=]obj.style.textOverflow
IE6 개체에서 문자의 넘처흐름을 표시하는 방식값을 반환한다.
{text-transform:val} obj.style.textTransform[=val]
⇒ 개체 속에서 문자의 변환 표현 방식을 반환하거나 설정한다.
{text-underline-position:val} obj.style.textUnderlinePosition[=val]
⇒ 개체의 textDecoration 속성이 'underline'로 설정된 경우 밑줄의 위치를 반환하거나 설정한다.
{text-transform:val} obj.style.textTransform[=val]
⇒ 개체 속에서 문자의 변환 표현 방식을 반환하거나 설정한다.
{text-underline-position:val} obj.style.textUnderlinePosition[=val]
⇒ 개체의 textDecoration 속성이 'underline'로 설정된 경우 밑줄의 위치를 반환하거나 설정한다.
{top:val} [val=]obj.style.top
⇒ 개체 체계도 상 바로위의 개체로부터의 거리를 반환한다.
{unicode-bidi:val} obj.style.unicodeBidi[=val]
⇒ 양방향 알고리즘에 관한 깔린 수준을 반환하거나 설정한다.
{vertical-align:val} [val=]obj.style.verticalAlign
⇒ 개체의 수직 정렬 방식을 반환한다.
{visibility:val} obj.style.visibility[=val]
⇒ 개체의 내용이 디스플레이될 것인가를반환하거나 설정한다.
{white-space:val} obj.style.whiteSpace[=val]
⇒ 개체 속에서 길이가 긴 문자열의 자동 줄바꿈을 빈칸에서 할 것인가를 반환하거나 설정한다.
{width:val} obj.style.width[=val]
⇒ 개체의 너비를 반환한다.
{word-break:val} [val=]obj.style.wordBreak
⇒ 단어 속에서 자동 줄바꿈을 할 것인가를 반환한다. 특히 복수 언어를 사용할 때 중요한다.
{word-spacing:val} obj.style.wordSpacing[=val]
⇒ 개체 속에서 단어간의 간격을 증가시키는 정도를 반환하거나 설정한다.
{word-wrap:val} obj.style.wordWrap[=val]
⇒ 내용이 용기 개체의 범위를 초과하면 단어를 자를 것인가를 반환하거나 설정한다.
{writing-mode:val} obj.style.writingMode[=val]
⇒ 개체속 내용의 방향이나 흐름을 반환하거나 설정한다.
{z-index:val} obj.style.zIndex[=val]
⇒ 위치가 정해져 있는 개체의 스택킹(위에서 보이는) 순서를 반환하거나 설정한다.
{zoom:val} obj.style.zoom[=val]
⇒ 개체의 확대 배율을 반환하거나 설정한다.

메서드설명
getAttribute 지정된 애트리뷰트의 값을 반환한다.
getExpression 주어진 속성의 표현(expression)을 반환한다.
setAttribute 지정된 애트리뷰트를 설정한다.
setExpression 지정된 개체의 표현(expression)을 설정한다.

개체 속성 읽기 예제

id=tdObj 문자열  
결과 표시창
<TABLE id=tableObj border width=400>
<TR><TD width=300 id=tdObj>id=tdObj 문자열</TD><TD> </TD></TR>
</TABLE>
<SCRIPT>
function showCurStyle(){
  str='screen.width='+screen.width+'<BR>';
  str+='document.body.clientWidth='+document.body.clientWidth+'<BR>';
  str+='tableObj.currentStyle.width='+tableObj.currentStyle.width+'<BR>';
  str+='tdObj.currentStyle.width='+tdObj.currentStyle.width;
  showA.innerHTML=str;
}
</SCRIPT>
<BUTTON onclick=showCurStyle()>currentStyle</BUTTON>
<DIV id=showA>결과 표시창</DIV>

style 개체 속성 변경 개체 예제

클릭하여 스타일을 바꿔보라.

결과 표시창
<SCRIPT>
function checkColor(obj){
  if (obj.currentStyle.backgroundColor=='blue'){
    obj.style.backgroundColor='yellow';
    obj.style.color='blue';
  } else {
    obj.style.backgroundColor='blue';
    obj.style.color='white';
  }
  str='obj.style.backgroundColor='+obj.style.backgroundColor+'<BR>';
  str+='obj.style.color='+obj.style.color+'<BR>';
  str+='obj.currentStyle.backgroundColor='+obj.currentStyle.backgroundColor+'<BR>';
  str+='obj.currentStyle.color='+obj.currentStyle.color+'<BR>';
  showA1.innerHTML=str;
}
</SCRIPT>
<P style="background-color:blue;color:white;cusor:hand;width:300" onclick="checkColor(this)">클릭하여 스타일을 바꿔보라.</P>
<DIV id=showA1>결과 표시창</DIV>

사용자 정의 개체 속성 예제

id=dObj 문자열
<STYLE>div.userStyle{userProp:userRWprop;border:solid 1 blue}</STYLE>
<DIV id=dObj class=userStyle>id=dObj 문자열</DIV>
<SCRIPT>
document.write('dObj.currentStyle.userProp='+dObj.currentStyle.userProp);
</SCRIPT>