HTML中不支持静态Expando的元素的问题


Posted in Javascript onMarch 08, 2007

在使用脚本统一处理一批页面的时候,我希望通过被处理页面的TITLE元素取到文档的标题和我自定义的一些属性。这些附加的属性是我在服务器端通过Attributes集合添加的,可是运行的结果和我的期望老是相去甚远,怎么我在TITLE元素里写入的自定义属性老是空值呢?

    客服端和服务器端代码分别是:

    ASPX:
<title id="title" runat="server">Query Info</title>
    C#:  protected HtmlGenericControl title;

private void Page_Load(object sender, System.EventArgs e)
{
    // ...
    title.InnerHtml = "查询信息";
    title.Attributes["icon"] = "QueryInfo.gif;
}
    HTML:
<title id="title" icon="QueryInfo.gif">查询信息</title>
    JavaScript:
var iconPath = docucment.all.tags('TITLE')[0].icon;
if ( iconPath )
{
    var img = document.createElement('IMG');
    img.src = iconPath;
    // ...
}

    结果就是总出不来我希望的那个icon,跟踪JavaScript代码,发现iconPath总是undefined。在看看HTML代码,里面明明有icon="QueryInfo.gif"这个属性值对。于是从title对象中去查看outerHTML,outerHTML居然是:<title id="title">查询信息</title>。根本没有icon那个属性,难怪JavaScript取到的iconPath总是undefined的说。

    仔细查下去,发现原来是html元素在处理expando属性上有区别。我们给html元素添加expando属性有两种方式,一是我们常用的动态方式;就是使用脚本来给html元素添加expando属性。二是使用静态方式;即在html代码中以literal方式添加expando属性。分别举例如下:

    动态添加expando属性: <span id=mySpan>this is a span element.</span>
<script language=javascript>
mySpan.myAttri = 'attribute';
</script>
    静态添加expando属性: <span id=mySpan myAttri=attribute>this is a span element.</span>
    本来这两种写法基本是没有什么区别的,可是元素title却只支持动态添加expando属性,而不支持静态添加expando属性,这也就是为什么我开始会出错误的原因。那么还有那些html elements和title一样不支持静态添加expando属性呢?在108个html elements中,以下10个元素都不支持静态添加expando属性:
HTML, HEAD, TITLE, BODY, BASEFONT, FORM, HR, HR, TBODY, SCRIPT
    不过动态添加expando属性,是所有的html elements和dhtml objects都支持的。

Javascript 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
使用TextRange获取输入框中光标的位置的代码
Mar 08 #Javascript
获取JavaScript用户自定义类的类名称的代码
Mar 08 #Javascript
JScript内置对象Array中元素的删除方法
Mar 08 #Javascript
在JavaScript中遭遇级联表达式陷阱
Mar 08 #Javascript
原型方法的不同写法居然会影响调试的解决方法
Mar 08 #Javascript
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 #Javascript
JS类库Bindows1.3中的内存释放方式分析
Mar 08 #Javascript
You might like
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
建立文件交换功能的脚本(三)
2006/10/09 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
javascript学习笔记(四) Number 数字类型
2012/06/19 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
Python常见异常分类与处理方法
2017/06/04 Python
Python之reload流程实例代码解析
2018/01/29 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
学习python可以干什么
2019/02/26 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
Python连接Impala实现步骤解析
2020/08/04 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
Python模块常用四种安装方式
2020/10/20 Python
佳能法国商店:Canon法国
2019/02/14 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
2015年教研员工作总结
2015/05/26 职场文书
乱世佳人观后感
2015/06/08 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
delete in子查询不走索引问题分析
2022/07/07 MySQL