前端小技巧：javascript 获取标签中的属性 对指定标签中的属性进行操作

javascript 标签中指定属性值的更改与获取

适用于基本标签 <input><i><a>等基本标签

引用jQuery，两种方式

使用下面的input标签为例子

<input id="iconid" type='radio' name='iconfont' value="icon" title=''></input>

 

1、使用id标签中的唯一属性，id="iconid"

a、获取input标签中的所有属性,即获取id、type、name、value、title。获取到的所有属性为object数组型，在前台输出打开后可以看到为什么使用下面的attr可以直接获取到指定属性。

$('#iconid’);

b、获取标签中的指定属性title     attr("属性");

$('#iconid’).attr("title");      

c、更改标签的属性值      attr("属性","值");

$('#iconid’).attr("title","我要把这句话赋值给属性title");

 

2、使用标签名字获取属性值以上述<input>标签为例

注此时文本中只有一个input标签。

a、获取input标签中的所有属性,即获取id、type、name、value、title。获取到的所有属性为object数组型，在前台输出打开后可以看到为什么使用下面的attr可以直接获取到指定属性。

$('input’);     

b、获取标签中的指定属性title    attr("属性");

$('input’).attr("title");

c、更改标签的属性值     attr("属性","值");

$('input’).attr("title","我要把这句话赋值给属性title");

 

当然在使用标签名称对属性进行操作时H5文档中会有多个<input>标签，面对这种情况，jQuery提供eq方法进行遍历。

如要对文本中的第2个input标签进行操作，获取该标签的全部属性代码如下

$('input’).eq(1);

获取标签中的指定属性title      attr("属性");

$('input’).eq(1).attr("title");

 

使用原生的JavaScript对标签的属性进行操作

使用下面的input标签为例子

<input id="iconid" type='radio' name='iconfont' value="icon" title=''></input>

 

1、使用id标签中的唯一属性，id="iconid" 。

//返回对拥有指定 ID 的第一个对象的引用

var iconid= document.getElementById("iconid")

a、获取input标签中的所有属性,即获取id、type、name、value、title。

iconid；

b、获取标签中的指定属性title    getAttribute("属性");  

iconid.getAttribute("title");

c、更改标签的属性值  setAttribute("属性","值");

iconid.setAttribute("title","我要把这句话赋值给属性title");

 

2、使用标签名字获取属性值以上述<input>标签为例

注此时文本中只有一个input标签。

//返回带有指定标签名的对象的集合

var iconid=document.getElementsByTagName("input");

a、获取input标签中的所有属性,即获取id、type、name、value、title。

iconid；

b、获取标签中的指定属性title    getAttribute("属性");  

iconid[0].getAttribute("title");

c、更改标签的属性值     setAttribute("属性","值");

iconid[0].setAttribute("title","我要把这句话赋值给属性title");