原生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获取自定义属性也可以尝试用此文章方法,虽然我还没有亲自测试过。

    A+
发布日期:2021年01月06日 12:42:41  所属分类:JavaScript
最后更新时间:2021-03-30 11:06:10
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
Photoshop CS视频教程全集:1000集PS课程
  • ¥ 199.0元
  • 市场价:899.0元
数据科学与人工智能:必备数学基础
  • ¥ 298.0元
  • 市场价:398.0元
PHP零基础入门到精通视频教程
  • ¥ 199.0元
  • 市场价:199.0元
Microsoft 全家桶 “激活码/产品密钥”永久
Microsoft 全家桶 “激活码/产品密钥”永久
  • ¥ 29.99元
  • 市场价:888元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: