用javascript添加控件自定義屬性解析

更新時(shí)間：2013年11月25日 09:23:52 作者：

這篇文章主要是對(duì)用javascript添加控件自定義屬性進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

前面說(shuō)過(guò)為HTML元素添加自定義的屬性，是通過(guò)手動(dòng)在HTML控件中加上，其實(shí)可以在javascript中動(dòng)態(tài)添加：如有一文本框：

如想增加idvalue屬性(值為”自定義值”)，可以在javascript中這樣寫(xiě):

var txt = document.getElementById("txtInput");
txt.setAttribute("idvalue","自定義值");

setAttribute中第一個(gè)參數(shù)是指明自定義屬性的名稱，第二個(gè)參數(shù)是初始值

代碼如下:

復(fù)制代碼代碼如下:

<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>

您可能感興趣的文章:

相關(guān)文章

深入理解JavaScript系列（16）閉包（Closures）
本章我們將介紹在JavaScript里大家經(jīng)常來(lái)討論的話題 —— 閉包（closure）。閉包其實(shí)大家都已經(jīng)談爛了。盡管如此，這里還是要試著從理論角度來(lái)討論下閉包，看看ECMAScript中的閉包內(nèi)部究竟是如何工作的
2012-04-04
js字符串操作方法實(shí)例分析
這篇文章主要介紹了js字符串操作方法,實(shí)例分析了javascript中slice、substr及substring等方法的使用技巧,需要的朋友可以參考下
2015-05-05
JavaScript變量Dom對(duì)象的所有屬性
這篇文章主要介紹了JavaScript變量Dom對(duì)象的所有屬性,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-04-04
怎么在下面的HTML里調(diào)用數(shù)組cs[]的值
怎么在下面的HTML里調(diào)用數(shù)組cs[]的值...
2007-01-01
JS使用canvas實(shí)現(xiàn)基本的截圖功能
這篇文章主要給大家介紹了使用JS中的canvas實(shí)現(xiàn)基本的截圖功能,文中有詳細(xì)的實(shí)現(xiàn)思路和實(shí)現(xiàn)過(guò)程,文章通過(guò)代碼示例講解的非常詳細(xì),很感興趣的同學(xué)可以參考一下
2023-08-08
原生js模擬淘寶購(gòu)物車(chē)項(xiàng)目實(shí)戰(zhàn)
這篇文章主要向大家推薦了一個(gè)原生js模擬淘寶購(gòu)物車(chē)項(xiàng)目實(shí)戰(zhàn)，包括商品的單選、全選、刪除、修改數(shù)量、價(jià)格計(jì)算、數(shù)目計(jì)算、預(yù)覽等功能的實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下
2015-11-11
js實(shí)現(xiàn)拖拽與碰撞檢測(cè)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)拖拽與碰撞檢測(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
用jquery.sortElements實(shí)現(xiàn)table排序
實(shí)現(xiàn)table排序，網(wǎng)上有很多解決方案，很多都基于jQuery，最后我選擇用sortElements，實(shí)現(xiàn)很簡(jiǎn)單
2014-05-05
自己寫(xiě)的Javascript計(jì)算時(shí)間差函數(shù)
Javascript計(jì)算時(shí)間差函數(shù),獲得時(shí)間差,時(shí)間格式為年-月-日小時(shí):分鐘:秒或者年/月/日小時(shí)：分鐘：秒。
2013-10-10
js實(shí)現(xiàn)多張圖片延遲加載效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)多張圖片延遲加載效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07