用js如何取到div中的值

JavaScript024

用js如何取到div中的值,第1张

思路:通过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,如下图: