direction

設定物件的讀取順序。

語法

{ direction: sDirection }

可能的值

sDirection

指定下列其中一個值的字串:

ltr

預設值。內容行文方向為由左至右。

inherit

繼承內容行文方向。

rtl

內容行文方向為由右至左。

此屬性的預設值為 ltr 。這是繼承屬性。

備註

此屬性不影響文件中由左至右讀取的英數字元這些字元一律會呈現 ltr 。不過,此屬性會影響文件中由左至右讀取的標點符號字元。

此屬性只與元素內容的行文方向有關,不會影響 leftrightmargin-leftmargin-right 等屬性。例如, margin-left 屬性會設定文件左側的邊界寬度,而不考慮 direction 屬性的值。

範例

下列範例示範如何設定及擷取 direction 屬性的值。當使用者設定 DIV 元素之 direction 屬性的值時,屬性的值會擷取在 SPAN 元素中:

<html>
  <head><script>
    function fnSwitch()
    {
      odiv.style.direction = event.srcElement.innerText;
      Dirspan.innerText = odiv.style.direction;
   }
    </script>
  </head>
<body>
<h1>direction Property Sample</h1>
    <h2>direction: 
      <span id="Dirspan" style="color:red"></span>
    </h2>

  [ <a href="#" onclick=fnSwitch()>ltr</a> | <a href="#" 
  onclick=fnSwitch()>rtl</a> | <a href="#" onclick=fnSwitch()>inherit</a> ]</p>
  
  <div id="odiv">The quick brown fox jumps over the lazy yellow dog. The quick brown fox 
  jumps over the lazy yellow dog. The quick brown fox jumps over the lazy yellow 
  dog. The quick brown fox jumps over the lazy yellow dog. The quick brown fox 
  jumps over the lazy yellow dog.</div>
</body>
</html>

標準資訊

您可以在 Cascading Style Sheets (CSS), Level 2 (CSS2) (階層式樣式表 (CSS) 層級 2 (CSS2)) Ee371220.xtlink_newWindow(zh-tw,Expression.40).png 找到此屬性的定義。

適用範圍

a, abbr, acronym, address, b, bdo, big, blockquote, body, button, caption, center, cite, code, col, colgroup, custom, dd, defaults, del, dfn, div, dl, dt, em, embed, fieldset, font, form, hn, i, img, input type=button, input type=checkbox, input type=file, input type=image, input type=password, input type=radio, input type=reset, input type=submit, input type=text, ins, li, object, ol, option, p, q, rt, ruby, s, select, span, sub, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var, xmp

另請參閱

概念

left
right
margin-left
margin-right