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 相关文章推荐
Js 中debug方式
Feb 07 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
javaScript NameSpace 简单说明介绍
Jul 18 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
解决vue+webpack打包路径的问题
Mar 06 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 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
php自动获取目录下的模板的代码
2010/08/08 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
2011/07/13 Javascript
jQuery实现鼠标滑过遮罩并高亮显示效果
2013/07/16 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
js实现音乐播放控制条
2017/09/09 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
vuex入门最详细整理
2020/03/04 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
详解Python中for循环的使用方法
2015/05/14 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
如何在windows下安装Pycham2020软件(方法步骤详解)
2020/05/03 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
大一学生假期实习的自我评价
2013/10/12 职场文书
会计实习自我鉴定
2013/12/04 职场文书
工商管理实习生自我鉴定范文
2013/12/18 职场文书
2015年党小组工作总结
2015/05/26 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
植树节新闻稿
2015/07/17 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
python游戏开发之pygame实现接球小游戏
2022/04/22 Python