<img usemap不能得到outHTML,如何对标签操作
HTML代码:
<div id="img01" class="x-hide-display">
<map id="jfreechart-5656490627055919439.png" name="jfreechart-5656490627055919439.png">
<area shape="poly" coords="522,269,525,275,519,275,519,275" title="(xxx费用, xxxx年) = 44,368,022.12" alt="" nohref="nohref"/>
<area shape="poly" coords="525,542,525,544,522,545,520,544,519,542,520,540,522,539,525,540,525,542,525,542" title="(xxx总费用, xxxx年) = 677,419.99" alt="" nohref="nohref"/>
<area shape="poly" coords="519,265,525,265,525,271,519,271,519,265,519,265" title="(总费用, xxxx年) = 45,045,442.11" alt="" nohref="nohref"/>
<area shape="poly" coords="343,69,346,75,340,75,340,75" title="(xxxxx总费用, 2011年) = 76,801,537.89" alt="" nohref="nohref"/>
<area shape="poly" coords="346,535,345,537,343,538,341,537,340,535,341,533,343,532,345,533,346,535,346,535" title="(xxx总费用, xxxx年) = 1,849,360.877" alt="" nohref="nohref"/>
<area shape="poly" coords="340,58,346,58,346,64,340,64,340,58,340,58" title="(总费用, xxxx年) = 78,650,898.767" alt="" nohref="nohref"/>
<area shape="poly" coords="164,492,167,498,161,498,161,498" title="(xxx总费用, 2010年) = 8,237,826.64" alt="" nohref="nohref"/>
<area shape="poly" coords="167,544,166,546,164,547,162,546,161,544,162,542,164,541,166,542,167,544,167,544" title="(xx总费用, xxxx年) = 341,959.202" alt="" nohref="nohref"/>
<area shape="poly" coords="161,490,167,490,167,496,161,496,161,490,161,490" title="(总费用, xxxx年) = 8,579,785.842" alt="" nohref="nohref"/>
</map>
<img class="changeOutHTML" src="/servlet/DisplayChart?filename=jfreechart-5656490627055919439.png" width="600" height="600" border=0 usemap="#jfreechart-5656490627055919439.png">
</div>问题:如何在<img>标签的前后加上<center></center>包裹
第一个想到的方法就是outHTML嘛,这个一定行,但是我在FF上尝试去得到,但返回的都是undefined,(IE上没有测试过),就算可以那也不兼容FF,所以没有测试
下面是如何解决这个问题的:
这个就是完成居中的代码:
var imgs=document.getElementsByTagName('div');
var imgsFilters=new Array();
for(var i=0;i<imgs.length;i++){
if(/^img/.test(imgs[i].id)){
imgsFilters.push(imgs[i]);
}
}
//循环替换
for(var i=0;i<imgsFilters.length;i++){
var tag=imgsFilters[i].innerHTML.replace(/(\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029))/g, "");
var patt = new RegExp("<img.*>","g");
var result=patt.exec(tag);
tag=tag.replace(result,"<center>"+result+"</center>");
imgsFilters[i].innerHTML=tag;
}对代码的解释:
var imgs=document.getElementsByTagName('div'); //得到所有的div
var imgsFilters=new Array();//存储过滤后需要操作的div,所有需要操作的div的id前缀都是以img开头的
for(var i=0;i<imgs.length;i++){
if(/^img/.test(imgs[i].id)){//使用正则匹配开头符合过则的div,返回true则添加到需要操作的集合中,false不做任何操作
imgsFilters.push(imgs[i]);
}
}
下面这个循环很重要:
//循环替换标签内容
for(var i=0;i<imgsFilters.length;i++){//循环需要操作的div数组
//大家在想为什么需要这行,这行代码out.write("\t\t\tbackground:red !important;\r\n");我相信大家很熟悉,是JSP编译之后生成的Java文件,在一行的结尾会有\r\n,在正则匹配 的时候如果有换行,写这个则会比较麻烦,所以先将所有的换行全部替换
var tag=imgsFilters[i].innerHTML.replace(/(\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029))/g, "");
//匹配以"<img" 开头一直到该img的反标签结束 ">" 的字符串返回
var patt = new RegExp("<img.*>","g");
var result=patt.exec(tag);//返回匹配到的"<img开头直到该img 的反标签">"的字符串
//对其进行替换,在这里一定会有人说声明什么变量啊,"patt.exec(tag);"直接写两次不就结了,这样写会出问题,因为patt.exec(tag);返回的对象还带有一个属result.lastIndex,因为我上面写的是全局匹配,patt.exec(tag)会根据你调用的次数,而且存在多个可以匹配字符串,那么会依次返回,那么第一次匹配完后,下一次开始匹配的起始点就是上一次匹配lastIndex,如果调用两次,那么在我当前的这种情况下,会返回null,替换也会失败.
tag=tag.replace(result,"<center>"+result+"</center>");
//将替换后的字符串赋值给div
imgsFilters[i].innerHTML=tag;
}
不知道我的描述大家能否看懂,如有问题欢迎大家指出!
