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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
javascript arguments使用示例
Dec 16 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
原生JS实现层叠轮播图
May 17 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
使用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
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
php 数组的一个悲剧?
2011/05/11 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
微信小程序页面滚动到指定位置代码实例
2019/09/07 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
python生成word合同的实例方法
2021/01/12 Python
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
十一个高级MySql面试题
2014/10/06 面试题
麦当劳辞职信范文
2014/01/18 职场文书
三严三实学习心得体会
2014/10/13 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
秋季运动会开幕词
2015/01/28 职场文书
建筑工程催款函
2015/06/24 职场文书
小学教师教育随笔
2015/08/14 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python