DHTML
DHTML是个好东西,大大方面了前端的交互实现,使得获取页面元素以及动态修改页面元素变的简单无比。但是所有的浏览器都认识这些语法吗?
document.all
document.all不是所有浏览器都能识别,要写出更通用的代码,最好还是通过id来得到,使用document.getElementById(…)
element.outerText, element.innerText, element.outerHTML,element.innerHTML
element.outerText, element.innerText, element.outerHTML是属于IE特有的, 而element.innerHTML是通用的。
如果要在其他浏览器下使用不通用的属性,可以参考以下代码实现:
复制代码 代码如下:
if(!isIE()){
HTMLElement.prototype.__defineGetter__("innerText",
function(){
var anyString = "";
var childS = this.childNodes;
for(var i=0; i<childS.length; i++){
if(childS[i].nodeType==1)
anyString += childS[i].innerText;
else if(childS[i].nodeType==3)
anyString += ahildS[i].nodeValue;
}
return anyString;
}
);
HTMLElement.prototype.__defineSetter__("innerText",
function(sText){
this.textContent=sText;
}
);
}
document.forms.actionForm.inputName.value
之前用document.all.title.value来获取名为actionForm的标单中名为title的input域值得地方,应该改为document.forms.actionForm.input.value,要这么使用,首先要保证HTML中form标签与其他标签结构上有完整的闭合关系。
Table操作
moveRow ( iSource , iTarget )方法
oRow = tableObject.moveRow ( iSource , iTarget ),这个方法可以很方便实现table中tr的动态顺序调整。但是这个方法是IE内核自己实现的,不是DOM标准方法,所以别的浏览器没有。在使用到了这些IE独有的方法的地方,要么换用标准的DOM节点操纵方式——insertBefore(currobj, beforeObj.nextSibling),要么先在HTMLDocument类的prototype上自己实现一个 moveRow方法:
复制代码 代码如下:
function getTRArray(){
……
//将需要操纵的tr都放入数组作为该方法的返回值
}
function getTRByIndex(sourceELIndex){
var trArray = getTRArray();
var result = trArray[sourceELIndex];
return result;
}
if( !isIE && HTMLElement.moveRow == null )
{
//入参说明:
//sourceELIndex :需要移动的tr在tbody中的第几行(>=1)
//targetELIndex :需要移动到tbody中的第几行(>=1,<=行数)
HTMLElement.prototype.moveRow = function(sourceELIndex,targetELIndex)
{
var tbObject = document.getElementById("tbodyEL");
var resultEL;
if(sourceELIndex>=targetELIndex)
{//move up
var s = sourceELIndex-1;
var t = targetELIndex-1;
}else{
var s = sourceELIndex-1;
var t = targetELIndex;
}
var sourceEL = getTRByIndex(s);
var targetEL = getTRByIndex(t);
//alert("begin"+sourceELIndex+targetELIndex);
//alert("begin"+s+t);
tbObject.insertBefore(sourceEL,targetEL);
resultEL = sourceEL;
return resultEL;
}
}
DHTML是个好东西,大大方面了前端的交互实现,使得获取页面元素以及动态修改页面元素变的简单无比。但是所有的浏览器都认识这些语法吗?
document.all
document.all不是所有浏览器都能识别,要写出更通用的代码,最好还是通过id来得到,使用document.getElementById(…)
element.outerText, element.innerText, element.outerHTML,element.innerHTML
element.outerText, element.innerText, element.outerHTML是属于IE特有的, 而element.innerHTML是通用的。
如果要在其他浏览器下使用不通用的属性,可以参考以下代码实现:
复制代码 代码如下:
if(!isIE()){
HTMLElement.prototype.__defineGetter__("innerText",
function(){
var anyString = "";
var childS = this.childNodes;
for(var i=0; i<childS.length; i++){
if(childS[i].nodeType==1)
anyString += childS[i].innerText;
else if(childS[i].nodeType==3)
anyString += ahildS[i].nodeValue;
}
return anyString;
}
);
HTMLElement.prototype.__defineSetter__("innerText",
function(sText){
this.textContent=sText;
}
);
}
document.forms.actionForm.inputName.value
之前用document.all.title.value来获取名为actionForm的标单中名为title的input域值得地方,应该改为document.forms.actionForm.input.value,要这么使用,首先要保证HTML中form标签与其他标签结构上有完整的闭合关系。
Table操作
moveRow ( iSource , iTarget )方法
oRow = tableObject.moveRow ( iSource , iTarget ),这个方法可以很方便实现table中tr的动态顺序调整。但是这个方法是IE内核自己实现的,不是DOM标准方法,所以别的浏览器没有。在使用到了这些IE独有的方法的地方,要么换用标准的DOM节点操纵方式——insertBefore(currobj, beforeObj.nextSibling),要么先在HTMLDocument类的prototype上自己实现一个 moveRow方法:
复制代码 代码如下:
function getTRArray(){
……
//将需要操纵的tr都放入数组作为该方法的返回值
}
function getTRByIndex(sourceELIndex){
var trArray = getTRArray();
var result = trArray[sourceELIndex];
return result;
}
if( !isIE && HTMLElement.moveRow == null )
{
//入参说明:
//sourceELIndex :需要移动的tr在tbody中的第几行(>=1)
//targetELIndex :需要移动到tbody中的第几行(>=1,<=行数)
HTMLElement.prototype.moveRow = function(sourceELIndex,targetELIndex)
{
var tbObject = document.getElementById("tbodyEL");
var resultEL;
if(sourceELIndex>=targetELIndex)
{//move up
var s = sourceELIndex-1;
var t = targetELIndex-1;
}else{
var s = sourceELIndex-1;
var t = targetELIndex;
}
var sourceEL = getTRByIndex(s);
var targetEL = getTRByIndex(t);
//alert("begin"+sourceELIndex+targetELIndex);
//alert("begin"+s+t);
tbObject.insertBefore(sourceEL,targetEL);
resultEL = sourceEL;
return resultEL;
}
}
标签:
IE,依赖综合症
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“跨浏览器开发经验总结(三) 警惕“IE依赖综合症””评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新动态
2024年11月09日
2024年11月09日
- 雨林唱片《赏》新曲+精选集SACD版[ISO][2.3G]
- 罗大佑与OK男女合唱团.1995-再会吧!素兰【音乐工厂】【WAV+CUE】
- 草蜢.1993-宝贝对不起(国)【宝丽金】【WAV+CUE】
- 杨培安.2009-抒·情(EP)【擎天娱乐】【WAV+CUE】
- 周慧敏《EndlessDream》[WAV+CUE]
- 彭芳《纯色角3》2007[WAV+CUE]
- 江志丰2008-今生为你[豪记][WAV+CUE]
- 罗大佑1994《恋曲2000》音乐工厂[WAV+CUE][1G]
- 群星《一首歌一个故事》赵英俊某些作品重唱企划[FLAC分轨][1G]
- 群星《网易云英文歌曲播放量TOP100》[MP3][1G]
- 方大同.2024-梦想家TheDreamer【赋音乐】【FLAC分轨】
- 李慧珍.2007-爱死了【华谊兄弟】【WAV+CUE】
- 王大文.2019-国际太空站【环球】【FLAC分轨】
- 群星《2022超好听的十倍音质网络歌曲(163)》U盘音乐[WAV分轨][1.1G]
- 童丽《啼笑姻缘》头版限量编号24K金碟[低速原抓WAV+CUE][1.1G]