HTML5擴充全域屬性 - dir

》HTML5 全域屬性

*IE不支援，請使用 Chrome/Firefox

屬性 dir 用以指定文字在容器中呈現的方向，這個屬性有三個可能的值，分別是 ltr 、 rtl 或是 auto ，其中 ltr 表示從左至右，而 rtl 表示由右至左，至於 auto 則由瀏覽器根據容器自動決定。

考慮以下的設計，點選下方的選項按鈕，可以改變字串的位置。

康廷數位－HTML5從零開始－abcde

左至右（ltr）右自左（rtl）自動（auto）

此功能畫面的配置如下：

    <div id="msg"

        style="width: 620px; …">

        康廷數位－HTML5 完美風暴</div>

    <div style="padding: 10px">

        <input id="ltr" type="radio" name='dir'

        onchange="changeHandler(this)" checked />

        <label>

            左至右（ltr）</label>

        <input id="rtl" type="radio" name='dir'

        onchange="changeHandler(this)" />

        <label>

            右自左（rtl）</label>

        <input id="auto" type="radio" name='dir'

        onchange="changeHandler(this)" />

        <label>

            自動（auto）</label>

    </div>

畫面中的三個 radio 選項控制按鈕，分別設定了 onchange 屬性，並且在使用者改變選項的點選操作時，執行 changeHandler() ，其中取得目前使用者選取的選項按鈕，並且取出其 id 屬性值，直接將其設定給 div 元素的 dir 屬性，改變有字的預設配置。

》HTML5 全域屬性