思路:通过id可以获取到<div>对象,通过getAttribute()和innerHTML分别可以获取<div>对象的自定义属性和文本内容。下面实例演示获取<div>标签的自定义属性user_id:
1、HTML结构
<div id="test" user_id="test_id">id="test" user_id="test_id"</div><br/><input type='button' value='获取div的自定义属性' onclick="fun()"/>
2、javascript代码
function fun(){obj = document.getElementById("test")
alert(obj.getAttribute("user_id"))
}
3、点击按钮后效果
你可以直接用innerHTML这个方法返回div的内容。下面是个简单的小例子:
<body>
<div style="width:100px height:100px border:1px solid #ccc">
<a href="#">111111</a>
</div>
</body>
<script>
var oDiv = document.getElementsByTagName('div')[0]
alert(oDiv.innerHTML) //这样就可以获取div标签里面所有的内容。
</script>
这样alert弹出的框体里面的值是 '<a href="#">111111</a> '
使用JavaScript给html中的一个div的属性赋值可以使用jquery的attr()方法来实现。
工具原料:编辑器、jquery
1、首先jquery的attr()方法允许两个参数,如果值给一个参数则返回的是元素的属性的值,两个参数可以设置一个元素属性的值为第二个参数。
2、给div元素属性赋值的代码如下:
<div id="div1" class="test"></div><script type="text/javascript">
$('#div1').attr('class','baidu')
</script>
3、运行代码如下,审查元素防线class的值已经改为baidu,如下图: