codecamp

HTML DOM Map areas 集合

Map areas 集合

Map 对象参考手册 Map 对象

实例

获取图片地图中 <area> 元素的数目:

var x = document.getElementById("planetmap").areas.length;

x 输出值为:

3

尝试一下 »

定义和使用

areas 集合返回图像地图中所有 <area> 元素的集合。

注意: 集合中的元素排序按源代码中的顺序。

提示: 如果需要返回所有 <area> 元素中指定的 href 属性集合 ,'你需要使用 links 集合。


浏览器支持

Internet Explorer Firefox Opera Google Chrome Safari

所有主流浏览器都支持 areas 集合。


语法

mapObject.areas

属性

属性 描述
length 返回集合中 <area> 元素的数目

方法

方法 描述
[name_or_index] 字符串或整数,指定要检索的元素 (index 以 0 为起始)
item(name_or_index) 从集合中返回指定 index/name/id 的元素
namedItem(name_or_id) 从集合中返回指定名称的元素 (name 或 id 属性)


更多实例

实例

[name_or_index]

获取图像地图中第一个 <area> 元素的URL:

var x = document.getElementById("planetmap").areas[0].href;

尝试一下 »

实例

item(name_or_index)

获取图像地图中第一个 <area> 元素的URL:

var x = document.getElementById("planetmap").areas.item(0).href;

尝试一下 »

实例

namedItem(name_or_id)

获取图像地图中 id="myArea" 的<area> 元素URL:

var x = document.getElementById("planetmap").areas.namedItem("myArea").href;

尝试一下 »

实例

获取图像地图中所有<area>元素的形状:

var x = document.getElementById("planetmap");
var txt = "";
for (var i = 0; i < x.areas.length; i++)
  {
  txt = txt + x.areas[i].shape + "<br>";
  }
document.getElementById("demo").innerHTML = txt;

尝试一下 »


Map 对象参考手册 Map 对象

温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

HTML DOM对象

HTML DOM 引用对象

HTML DOM Password 对象

HTML DOM Link 对象

HTML DOM Select 对象

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }