element.tabIndexは、「element」に指定した要素のタブインデックス（タブによる移動順序を示す数値）を取得、もしくは、設定するプロパティ。
構文
取得
var $tabIndex = $elementNodeReference.tabIndex;
戻り値
指定した要素のタブインデックス（タブによる移動順序を示す数値）。
設定
$elementNodeReference.tabIndex = タブインデックス;
「タブインデックス」に、タブによる移動順序を示す数値を指定する。
サンプル
- 項目Ａ
- 項目Ｂ
- 項目Ｃ
サンプルの動作について
- 「getTabIndex()」ボタンをクリックすると、id属性が「sample」であるリスト要素の各リスト項目の現在のタブインデックスを、各リスト項目ごとに赤い色のテキストで表示する。
- 「昇順」ボタンをクリックすると、id属性が「sample」であるリスト要素の各リスト項目のタブインデックスを昇順で指定する。
- 「降順」ボタンをクリックすると、id属性が「sample」であるリスト要素の各リスト項目のタブインデックスを降順で指定する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
window.onload = function () {
setTabIndexAsc();
}
function setTabIndexAsc() {
var $elementNodeReference = document.getElementById( "sample" );
var $children = $elementNodeReference.children;
var $tabIndex = 1;
for( i=0; i < $children.length; i++ ){
$children[i].tabIndex = $tabIndex++;
}
}
function setTabIndexDesc() {
var $elementNodeReference = document.getElementById( "sample" );
var $children = $elementNodeReference.children;
var $tabIndex = $children.length;
for( i=0; i < $children.length; i++ ){
$children[i].tabIndex = $tabIndex--;
}
}
function getTabIndex() {
var $elementNodeReference = document.getElementById( "sample" );
var $children = $elementNodeReference.children;
var $tabIndex = 0;
for( i=0; i < $children.length; i++ ){
$children[i].getElementsByTagName( "font" )[0].innerHTML = " " + $children[i].tabIndex;
}
}
</script>
window.onload = function () {
setTabIndexAsc();
}
function setTabIndexAsc() {
var $elementNodeReference = document.getElementById( "sample" );
var $children = $elementNodeReference.children;
var $tabIndex = 1;
for( i=0; i < $children.length; i++ ){
$children[i].tabIndex = $tabIndex++;
}
}
function setTabIndexDesc() {
var $elementNodeReference = document.getElementById( "sample" );
var $children = $elementNodeReference.children;
var $tabIndex = $children.length;
for( i=0; i < $children.length; i++ ){
$children[i].tabIndex = $tabIndex--;
}
}
function getTabIndex() {
var $elementNodeReference = document.getElementById( "sample" );
var $children = $elementNodeReference.children;
var $tabIndex = 0;
for( i=0; i < $children.length; i++ ){
$children[i].getElementsByTagName( "font" )[0].innerHTML = " " + $children[i].tabIndex;
}
}
</script>
CSS
<style type="text/css">
#sample{
width: 400px;
padding: 10px 10px 10px 30px;
background-color: #fffee7;
border: 1px solid #dddddd;
border-radius: 5px;
}
</style>
#sample{
width: 400px;
padding: 10px 10px 10px 30px;
background-color: #fffee7;
border: 1px solid #dddddd;
border-radius: 5px;
}
</style>
HTML
<ul id="sample">
<li>項目Ａ<font style="color: red;"></font></li>
<li>項目Ｂ<font style="color: red;"></font></li>
<li>項目Ｃ<font style="color: red;"></font></li>
</ul>
<button onclick="getTabIndex();">getTabIndex()</button>
<button onclick="setTabIndexAsc();">昇順</button>
<button onclick="setTabIndexDesc();">降順</button>
<li>項目Ａ<font style="color: red;"></font></li>
<li>項目Ｂ<font style="color: red;"></font></li>
<li>項目Ｃ<font style="color: red;"></font></li>
</ul>
<button onclick="getTabIndex();">getTabIndex()</button>
<button onclick="setTabIndexAsc();">昇順</button>
<button onclick="setTabIndexDesc();">降順</button>