用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 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
判断用户是否在线的代码
Mar 05 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
Jun 28 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
javascript拖拽应用实例
Mar 25 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
js仿360开机效果
Dec 26 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
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
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
javascript操作css属性
2013/12/30 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
Django如何实现内容缓存示例详解
2017/09/24 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
对python调用RPC接口的实例详解
2019/01/03 Python
python assert的用处示例详解
2019/04/01 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
pytorch数据预处理错误的解决
2020/02/20 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Python celery原理及运行流程解析
2020/06/13 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
JAVA代码查错题
2014/10/10 面试题
工程造价与管理专业应届生求职信
2013/11/23 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
学生会竞聘书范文
2014/03/31 职场文书
团委竞选演讲稿
2014/04/24 职场文书
教师工作表现自我评价
2015/03/05 职场文书
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers