原生JS“增加/获取/修改/删除”元素属性方法

今天在做Ajax三级联动的时候，项目要求：最初刚打开页面的时候，后面两个联动要么 disabled="disabled" 禁用，要么用 hidden="hidden" 来隐藏......以此类推。

经过大量的测试，最后决定用 disabled="disabled" 禁用元素，因为用 hidden="hidden" 来隐藏元素，AJAX POST 请求的数据服务器照样能接收到，这点不是很友好。

当然了，disabled="disabled" 与  hidden="hidden"  一起用，也能达到后台既不接收ajax传过来的数据，三级联动也不会一起显示让使用的效果，想想没有必要搞重复的功能吧！

注意：

disabled 属性无法与 input type="hidden" 一起使用，却可以与 hidden="hidden" 一起使用。

下面再给大家简单补充一点基础知识：

1、什么是DOM元素？

一个DOM元素就像一个页面上的DIV，HTML，BODY元素。可以使用CSS为所有这些类添加类，或者使用JS与它们交互。

 

2、什么是DOM元素 属性？

简单来说，属性就是 DOM元素 里面的东西。

 

例如：

<input id="alias" type="text" class="form-control" required="required" name="alias" maxlength="20" pattern="[a-z]+" title="未通过！" placeholder="">

input标签就是“DOM元素”。

input标签里面的：required、maxlength、pattern、id、class、title.......就是“DOM元素 属性”。

我的html代码：

  <select onchange="Loadprovince()"  class="form-control" name="province" id="province" hidden="hidden" disabled="disabled">
                        <option value ="province">省</option>
                        <option value ="1">四川</option>
                        <option value ="2">辽宁</option>
                    </select>

一、JS 获取属性名 方法

<script>
document.getElementById("province").getAttribute("属性名");
</script>

示例：

document.getElementById("province").getAttribute("disabled");

二、JS 增加、设置或修改属性值 的方法

<script>
document.getElementById("province").setAttribute("属性名","属性值");
</script>

示例：

document.getElementById("province").setAttribute("disabled","disabled");

三、JS 移除或删除属性 的方法

<script>
document.getElementById("province").removeAttribute("属性名");
</script>

示例：

document.getElementById("province").removeAttribute("disabled");

总结：

如果你想用js获取自定义属性也可以尝试用此文章方法，虽然我还没有亲自测试过。