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 相关文章推荐
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 Javascript
vue实现可拖拽的dialog弹框
May 13 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
PHP网站提速三大“软”招
2006/10/09 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
vue keep-alive的简单总结
2021/01/25 Vue.js
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
Python 实现将大图切片成小图,将小图组合成大图的例子
2020/03/14 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
优秀幼教自荐信
2014/02/03 职场文书
入党申请自荐书范文
2014/02/11 职场文书
2014年清明节寄语
2014/04/03 职场文书
技校毕业生自荐信
2014/06/03 职场文书
学习十八大演讲稿
2014/09/15 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
地道战观后感
2015/06/04 职场文书
新学期主题班会
2015/08/17 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
redis protocol通信协议及使用详解
2022/07/15 Redis