`

JS自定义属性的设置与获取

阅读更多

    以前感觉用JQuery来设置自定义属性很方便,现在没有用JQuery,要用原生的JavaScript来操作自定义属性。


Jquery操作自定义属性的方法,很简洁:

$("#test").attr("test","aaa") // 设置
$("#test").removeAttr("test") // 删除

var testAttr = "ddd";
$('#test[test="'+ testAttr +'"]')


JavaScript操作定义属性的方法,如下所示:
var testEle = document.getElementById("test")
testEle.setAttribute("test","aaa"); // 设置
testEle.attributes["test"].nodeValue; // 获得


感觉JS上层库用多了,反而原生的不会了,特此在此记录一下,也分享一下。
分享到:
评论
5 楼 asialee 2010-07-13  
asialee 写道
guodong66 写道
input 加上后,直接用这个获取不到

我以前获取过呀。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="keywords" content="  JS自定义属性的设置与获取" />
    <script type="text/javascript">
function getValue() {
// 这个就是那个input的id呀,可以获得
var testEle = document.getElementById("test") 
testEle.setAttribute("test","aaa"); // 设置 
var valueValue = testEle.attributes["test"].nodeValue; // 获得 
alert(valueValue);
    }
    </script>
   <input type="input"  id ="test" onClick="getValue()"/>
  </body>
</html>

上面是我写的代码可以获取到的。
4 楼 asialee 2010-07-13  
guodong66 写道
input 加上后,直接用这个获取不到

我以前获取过呀。
3 楼 guodong66 2010-07-13  
input 加上后,直接用这个获取不到
2 楼 asialee 2010-02-05  
yyang1986321 写道
<input>框如果加个自定义的属性,怎么获得啊?

// 这个就是那个input的id呀,可以获得
var testEle = document.getElementById("test")  
testEle.setAttribute("test","aaa"); // 设置  
testEle.attributes["test"].nodeValue; // 获得  
1 楼 yyang1986321 2010-02-05  
<input>框如果加个自定义的属性,怎么获得啊?

相关推荐

    ExtTag,获取HTML自定义属性

    综上所述,`ExtTag`可能是用于简化HTML自定义属性操作的一个工具,它将这些属性转化为JS对象,便于在JavaScript中处理和执行。对于Web开发者来说,理解和熟练使用这样的工具能够提高工作效率,使HTML和JavaScript...

    javascript 自定义属性的使用

    使用Javascript的自定义属性实现一个按钮被点击两次后,让其不可用。

    js设置和获取自定义属性的方法

    本文将详细介绍如何在JavaScript(简称JS)中设置和获取这些自定义属性的方法。 首先,我们需要了解HTML中的自定义属性通常是以data-为前缀的。例如,如果我们想为一个元素添加一个描述用户信息的属性,我们可能会...

    JS实现获取自定义属性data值的方法示例

    本文实例讲述了JS实现获取自定义属性data值的方法。分享给大家供大家参考,具体如下: HTML部分: &lt;div id=tree data-leaves=47 data-plant-height=2.4m&gt;&lt;/div&gt; js部分: var tree = document.getElementById...

    jQuery给HTML标签添加自定义属性.zip

    在jQuery中,我们可以轻松地设置或获取这些自定义属性。 1. 添加自定义属性 在HTML中,可以手动为元素添加自定义属性,如: ```html 点击我 ``` 使用jQuery添加自定义属性,可以使用`.attr()`方法。例如,如果HTML...

    vue.js 获取当前自定义属性值

    在Vue.js中,我们通常使用Vue的指令或方法来获取这些自定义属性的值。本文将详细介绍如何在Vue.js中获取自定义属性值。 首先,需要明确的是,在HTML中,所有以“data-”为前缀的属性都会被自动存储在一个名为`...

    使用javascript操纵HTML元素的自定义属性

    为HTML元素添加一自定义的属性非常方便,只须将其加到尖括号中即可,与内置属性地位相等。 &lt;br /&gt;如我们要为TextBox元素添加属性idvalue: &lt;br /&gt;只须在原来的控件后面加上:idvalue=”…”,成为: ...

    layui select获取自定义属性方法

    通过自定义属性,开发者能够存储与选项相关联的额外信息,并通过JavaScript动态地访问和操作这些信息。这对于实现一些复杂交互场景特别有用,比如为选项添加图片、链接或其他元数据。在实际开发中,合理使用自定义...

    HTML:自定义标签属性

    1. **命名方式**:自定义属性名称应以 `data-` 前缀开始,以避免与现有的标准属性冲突。 2. **格式要求**:自定义属性名称必须是合法的标识符,即由字母、数字、连字符 `-` 或下划线 `_` 组成,但不能以数字开头。 ...

    option自定义属性的用处

    除了基本的 `value` 和 `selected` 属性外,`&lt;option&gt;` 标签还支持自定义属性,这些属性虽然不会随表单提交到服务器端,但在客户端可以通过 JavaScript 进行访问和操作。 #### 二、自定义属性概述 自定义属性...

    js 点击a标签 获取a的自定义属性方法

    在传统的原生JavaScript中,我们可以通过访问元素的`attributes`集合来获取所有的属性,包括自定义属性。下面是获取自定义属性的一种方法: ```javascript function showDetail(obj) { var ownattr = obj....

    vue如何获取自定义元素属性参数值的方法

    在Vue框架中,获取自定义元素属性参数值是进行组件间数据传递和操作的常见需求。...在处理自定义属性时,应当更加注意数据的传递与处理,避免直接操作DOM,而是更多地利用Vue提供的响应式系统来实现数据与视图的同步。

    JS操作HTML自定义属性的方法

    获取自定义属性值: 代码如下:document.getElementById(“txtBox”).getAttribute(“displayName”); document.getElementById(“txtInput”).attributes[“displayName”].nodeValue 设置自定义属性值: 代码如下

    js获取单元格自定义属性值的代码(IE/Firefox)

    本篇将详细讲解如何在IE和Firefox两种浏览器环境下,通过JavaScript获取单元格的自定义属性值。 首先,我们需要了解JavaScript中的`document.all`对象,这是IE特有的一个全局对象,它包含了一个HTML文档中所有`...

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

    一、JavaScript 添加自定义属性 在HTML中,我们通常会为元素设置内置的属性,例如`id`、`class`、`value`等。然而,有时我们需要为特定的元素添加一些自定义属性以存储额外的信息。这可以通过调用`setAttribute`...

    jquery 获取自定义属性(attr和prop)的实现代码

    在jQuery中,attr() 方法是进行DOM...无论是在简单的属性获取,还是复杂的属性动态设置上,attr() 方法都能提供简洁而高效的解决方案。在实际开发过程中,合理运用attr() 方法,将大大提高我们的开发效率和代码质量。

Global site tag (gtag.js) - Google Analytics