getAttribute()和setAttribute()用法简单介绍

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > getAttribute()和setAttribute()用法简单介绍

本章节通过代码实例简单介绍一下两个函数地 作用希望能够给需要的朋友带来帮助。

标题中的两个函数是用来获取或者设置元素的属性和属性值，下面分别做一下介绍。

一.getAttribute()函数:

此函数用来获取指定元素的属性值。

语法结构:

[ 其他 ] 运行代码下载代码

<script>
obj.getAttribute(attr);
</script>

参数解析:

1.obj:要获取属性的值的对象。

2.attr:属性的名称。

代码实例:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
window.onload=function(){
  var obt=document.getElementById("bt");
  var odiv=document.getElementById("thediv")
  obt.onclick=function(){
    odiv.innerHTML=odiv.getAttribute("title");
  }
}
</script> 
</head>
<body>
<div id="thediv" title="51前端"></div>
<input type="button" id="bt" value="查看效果"/> 
</body> 
</html>

上面的代码点击按钮可以获取div的title属性值。

二.setAttribute()函数:

上面的函数可以获取元素的属性值，那么此元素可以设置元素的属性值。

语法结构:

[ 其他 ] 运行代码下载代码

<script>
obj.setAttribute(attr,value);
</script>

参数解析:

1.obj:要设置属性的元素对象。

2.attr:要设置的属性名称。

3.value:属性的值。

代码实例:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript"> 
window.onload=function(){
  var setBt=document.getElementById("setBt");
  var getBt=document.getElementById("getBt");
  var odiv=document.getElementById("thediv")
  setBt.onclick=function(){
    odiv.setAttribute("title","51前端");
  }
  getBt.onclick=function(){
    odiv.innerHTML=odiv.getAttribute("title");
  }
}
</script> 
</head>
<body>
<div id="thediv"></div>
<input type="button" id="setBt" value="设置属性"/> 
<input type="button" id="getBt" value="获取属性"/> 
</body> 
</html>

代码描述：getAttribute()和setAttribute()用法。getAttribute()和setAttribute()用法简单介绍

下载全部收藏

320 426

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册