HTML DOM tabIndex 属性
JavaScript基础 2022-06-08 15:31:43小码哥的IT人生shichen
HTML DOM tabIndex 属性
定义和用法
tabIndex 属性可设置或返回某个区域的 tab 键控制次序。
语法
areaObject.tabIndex=tabIndex实例
下面的例子可展示图像映射中区域的 tab 键控制次序：
<html>
<head>
<script type="text/javascript">
function showTabIndex()
{
var sun=document.getElementById('sun').tabIndex;
var mercury=document.getElementById('mercury').tabIndex;
var venus=document.getElementById('venus').tabIndex;
document.write("Tab index of Sun: " + sun);
document.write("<br />");
document.write("Tab index of Mercury: " + mercury);
document.write("<br />");
document.write("Tab index of Venus: " + venus);
}
</script>
</head>
<body>
<img src ="planets.gif"
width="145" height="126"
alt="Planets"
usemap ="#planetmap" />
<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="sun.htm" id="sun" tabIndex="1" />
<area shape ="circle" coords ="90,58,3"
href ="mercur.htm" id="mercury" tabIndex="2" />
<area shape ="circle" coords ="124,58,8"
href ="venus.htm" id="venus" tabIndex="3" />
</map>
<input type="button" onclick="showTabIndex()"
value="Show tabIndex" />
</body>
</html>TIY
完整实例【返回图像映射中区域的 tab 键控制次序】：
<html>
<head>
<script type="text/javascript">
function showTabIndex()
{
var sun=document.getElementById('sun').tabIndex;
var mercury=document.getElementById('mercury').tabIndex;
var venus=document.getElementById('venus').tabIndex;
document.write("Tab index of Sun: " + sun);
document.write("<br />");
document.write("Tab index of Mercury: " + mercury);
document.write("<br />");
document.write("Tab index of Venus: " + venus);
}
</script>
</head>
<body>
<img src ="/i/eg_planets.jpg"
alt="Planets"
usemap ="#planetmap" />
<map name="planetmap">
<area shape ="rect" coords ="0,0,110,260"
href ="/demo/example/hdom/sun.html" id="sun" tabIndex="1" />
<area shape ="circle" coords ="129,161,10"
href ="/demo/example/hdom/mercur.html" id="mercury" tabIndex="2" />
<area shape ="circle" coords ="0,0,110,260"
href ="/demo/example/hdom/venus.html" id="venus" tabIndex="3" />
</map>
<input type="button" onclick="showTabIndex()" value="显示 tabIndex" />
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
