用javascript添加控件自定义属性解析


Posted in Javascript onNovember 25, 2013

前面说过为HTML元素添加自定义的属性,是通过手动在HTML控件中加上,其实可以在javascript中动态添加:如有一文本框:

<input type="text" id="txtInput" name="txtInput" value="自定义文本">

如想增加idvalue属性(值为”自定义值”),可以在javascript中这样写:
var txt = document.getElementById("txtInput");
txt.setAttribute("idvalue","自定义值");

setAttribute中第一个参数是指明自定义属性的名称,第二个参数是初始值

代码如下:

<html>
<head>
    <title>用javascript添加控件自定义属性</title>
    <script language="javascript">
        function addCustomAttribute()
        {
            var txt = document.getElementById("txtInput");
            txt.setAttribute("idvalue","自定义值");
        }        function showIdValue()
        {
                var txt = document.getElementById("txtInput");
                alert(txt.attributes["idvalue"].nodeValue);
        }
    </script>
</head>
<body onload="addCustomAttribute();">
    <input type="text" id="txtInput" name="txtInput" value="自定义文本">
    <input type="button" value="显示idValue" onclick="showIdValue();">
</body>
</html>
Javascript 相关文章推荐
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
js生成word中图片处理方法
Jan 06 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
Nov 25 #Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 #Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 #Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 #Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 #Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 #Javascript
javascript 实现字符串反转的三种方法
Nov 23 #Javascript
You might like
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php连接数据库代码应用分析
2011/05/29 PHP
解析php取整的几种方式
2013/06/25 PHP
php随机抽奖实例分析
2015/03/04 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
php利用事务处理转账问题
2015/04/22 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
php微信公众号开发之图片回复
2018/10/20 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
2013/08/02 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
2018/01/03 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
python实现的简单猜数字游戏
2015/04/04 Python
python调用staf自动化框架的方法
2018/12/26 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
利用Pytorch实现简单的线性回归算法
2020/01/15 Python
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
搞笑获奖感言
2014/01/30 职场文书
高中生的自我评价
2014/03/04 职场文书
电力安全事故反思
2014/04/27 职场文书
银行求职信
2014/05/31 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
个人总结怎么写
2015/02/26 职场文书
给病人的慰问信
2015/03/23 职场文书
捐款仪式主持词
2015/07/04 职场文书