如何用js给html控件赋值

JavaScript020

如何用js给html控件赋值,第1张

以点击按钮，改变按钮元素的内容为案例，点击的时候 ”按钮“ 变为 ”hello“

1、通过js获取元素，例如，获取元素btn按钮

2、通过js，当点击按钮的时候，改变原来的值为“hello”

3、运行效果如下：

4、点击按钮之后的效果：

完整的html代码如下：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

.wrap{

width:400px

height:300px

background:#000

position:relative

}

a.btn1{

display:block

width:140px

height:40px

line-height:40px

text-align:center

background:#ff0099

color:#fff

position:absolute

left:100px

top:100px

}

  </style>

 </head>

 <body>

  

<div class="wrap">

<a href="javascript:" class="btn1" id="btn">按钮</a>

</div>

<script type="text/javascript">

var oBtn= document.getElementById("btn")

oBtn.onclick=function(){

oBtn.innerHTML="hello"

}

</script>

 </body>

</html>

使用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，如下图：