문서 계통도상 다음에 위치한 개체의 왼쪽 모서리에서 해당 개체의 왼쪽 위치까지의 거리를 반환하거나 설정한다.
| Script | object.style.left=[sVal] |
| HTML | <ELEMENT style="left:sVal;"> | |
| CSS | cssSelector {left:sVal;} |
| auto | 디폴트이며, 일반적인 HTML 페이지의 레이아웃상 디폴트 위치이다. |
| (길이) | 부동소수점수치 다음에 cm, mm, in, pt, pc나 px 등 길이 단위가 따르는 절대 길이, 혹은 em or ex 등의 단위가 따르는 상대 길이이다. CSS 길이단위를 참조하라. |
| (백분율) | 정수값에 백분율 기호(%)를 붙인 것이다. 이 값은 모체 너비에 대한 백분율이다. |
이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 auto이다.
CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.
left 애르리뷰트를 사용하기 위해서는 position 애트리뷰트가 설정되어 있어야 하며, 그렇지 않으면 left 애트리뷰트는 무시된다.
left 속성의 값은 문자열이므로, 이 속성값을 스크립트의 개체의 위치 계산에 사용할 수 없다.
대신 pixelLeft 속성이나 posLeft 속성을 사용하여야 한다.
| 개체 | script | CSS | IE 버전 |
|---|---|---|---|
| a | a.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| address | address.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| applet | applet.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| b | b.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| big | big.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| blockQuote | blockQuote.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| button | button.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| center | center.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| cite | cite.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| code | code.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| currentStyle | [sVal=]objectcurrentStyle.left | cssSelector{left:sVal} | IE5(win16,win32,unix,mac) |
| custom | custom.style.left[=sVal] | cssSelector{left:sVal} | IE5(win32,unix) |
| dd | dd.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| publicDefaults | publicDefaults.style.left[=sVal] | cssSelector{left:sVal} | IE5,5(win32) |
| dfn | dfn.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| dir | dir.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| div | div.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| dl | dl.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| dt | dt.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| em | em.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| embed | embed.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| fieldSet | fieldSet.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| font | font.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| form | form.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| hn | hn.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| hr | hr.style.left[=sVal] | cssSelector{left:sVal} | IE3.02(win16,win32,mac),IE4.0(ce,unix) |
| i | i.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| iFrame | iFrame.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| img | img.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| button | button.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| checkbox | checkbox.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| FileUpload | FileUpload.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| image | image.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| password | password.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| radio | radio.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| reset | reset.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| submit | submit.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| text | text.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| isIndex | isIndex.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| kbd | kbd.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| label | label.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| legend | legend.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| li | li.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| listing | listing.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| marquee | marquee.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| menu | menu.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| Object | Object.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| ol | ol.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| p | p.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| pre | pre.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| runtimeStyle | objectruntimeStyle.left[=sVal] | cssSelector{left:sVal} | IE5(win16,win32,unix,mac) |
| s | s.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| samp | samp.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| select | select.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| small | small.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| span | span.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| strike | strike.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| strong | strong.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| style | style.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| sub | sub.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| sup | sup.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| table | table.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| textArea | textArea.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| tt | tt.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| u | u.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| ul | ul.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| var | var.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
| xmp | xmp.style.left[=sVal] | cssSelector{left:sVal} | IE4.0(win16,win32,ce,unix,mac) |
이 속성은 CSS2(Cascading Style Sheets Level 2)에 정의되었다.
 style ⇒ | left 스타일속성⇒ |  |    | |
position:relative; 설정과 left 애트리뷰트를 이용하여 이미지 개체의 위치를 조정한다.
<STYLE>.divObj button{width:80}</STYLE>
<DIV style="border:solid 1 red;width:480"><IMG id=imgObj src=../../gif/tulip.gif style="position:relative;left:100"></DIV>
<DIV class=divObj style=white-space:nowrap>
<BUTTON onclick="imgObj.style.left='-30px';">-30px</BUTTON>
<BUTTON onclick="imgObj.style.left='0';">0</BUTTON>
<BUTTON onclick="imgObj.style.left='4cm';">4cm</BUTTON>
<BUTTON onclick="imgObj.style.left='200px';">200px</BUTTON>
<BUTTON onclick="imgObj.style.left='80%';">80%</BUTTON>
<BUTTON onclick="imgObj.style.left='auto';">auto</BUTTON>
</DIV>
| style ⇒ | left 스타일속성 | ⇒ | | | |
| 최종 수정: 05/13/2025 17:20:56 |  All right reserved | 비정상적인 방식으로 프레임없이 페이지에 접속하면 자주 오류가 발생됩니다. 오류가 나면 정상적 접속으로 시도해 보세요. | http://koxo.com/lang/js/style/left.html |