怎么用JS给一个HTML元素增加一个属性和值

Question

如题所述

Answer 1

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，填充问题基础代码。

2、在index.html中的<script>标签，输入js代码：$('#txt').val('添加值');$('#txt').attr('data', 'test');。

3、浏览器运行index.html页面，此时input元素成功被添加了值和属性。

Answer 2

<select style="width: 120px;" id="dp" name="dp" value="-1" onchange="funAlert(this)">
  <option value="-1" selected="selected"></option>
  <option value="1">WA1</option>
  <option value="2">OR2</option>
  <option value="3">AZ3</option>
  <option value="4">UT4</option>
  <option value="5">IA5</option>
  <option value="6">MD6</option>
</select>
 
<script type="text/javascript">
function funAlert(obj) {
    obj.setAttribute('demo', obj.value); //setAttribute设置自定义属性
    alert(obj.getAttribute('demo')); //getAttribute获取自定义属性的值
    alert(obj.getAttribute('value')); //由于没有用setAttribute('value', obj.value)修改自定义属性value的值，所以一直都是-1
    alert(obj.value); //直接获取select对象的value值，返回当前选中的option的值
}
</script>

value属性比较特殊，尽管value属性不是select元素的标准属性，但在JS中是可以通过select对象.value来获取选定值的，通过这种方法取得的value值实际上是所选择的option的value值。
像你这样直接在select标签的html代码中设置了一个value属性，JS仍然会把它当作是自定义属性。所以就出现了例子中这个比较“奇怪”的现象。

       

本回答被网友采纳

Answer 3

var el = document.getElementById('id');
el.setAttribute('name', 'Lee');