HTML5擴充全域屬性 - dir

》HTML5 全域屬性

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

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

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

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

此功能畫面的配置如下:

    <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 全域屬性



沒有留言: