disable=“disable” 让按钮变得不可选

先建一个按钮，让class = ’btn‘

然后，

添加，修改属性

document.getElementsByClassName('btn')[0].onclick = function(){

this.setAttribute('disabled'='disabled'); 第一个空填要修改的属性，第二个填要属性的值

}

如果属性里没有要添加的属性，就会把填写的属性添加进去，如果有就会覆盖。

  1. <body>
  2.     <input type="button" class="a1" id="b1" value="按钮"></input>
  3. </body>
  4. </html>
  5. <script type="text/javascript">
  6.     document.getElementsByClassName('a1')[].onclick = function () {
  7.         this.setAttribute('disabled','disabled');
  8.     }
  9.  
  10. </script>   //点击一下按钮，按钮就变成不可选择

获取这个属性的值，如果没有就返回null。

this.getAttribute('属性')

  1. <body>
  2.     <input type="button" class="a1" id="b1" value="按钮" disabled="disabled" ></input>
  3.     <input type="button" class="a1" id="b2" value="按钮2" aa=""></input>
  4. </body>
  5. </html>
  6. <script type="text/javascript">
  7.     document.getElementsByClassName('a1')[].onclick = function () {
  8.         var gg = this.getAttribute('aa');
  9.         alert(gg);
  10.         }
  11. </script>  //获取按钮2里面属性aa的值

this.removeAttribute('属性名')   删除属性

  1. <body>
  2.     <input type="button" class="a1" id="b1" value="按钮" disabled="disabled"></input>
  3.     <input type="button" class="a1" id="b2" value="按钮2" ></input>
  4. </body>
  5. </html>
  6. <script type="text/javascript">
  7.     document.getElementsByClassName('a1')[].onclick = function () {
  8.         document.getElementById('b1').removeAttribute('disabled');
  9.         }
  10.  
  11. </script>  //点击按钮2就会删除按钮1的disabled属性

操作内容：

普通元素.innerHTML = "值"； 会把值里面的标记执行（如果有换行之类的就会换行等····）

普通元素.innerText = "值"； 将值原封不动的展示出来，即使里面有标记也连标记一起打出来

var s = 普通元素.innerHTML; 会把此元素下的所有文本及标记代码取出来。
var s = 普通元素.innerText; 值会把此元素下的文本取出来，标记不予理会。

这中作用下对值中代码的态度和上边的完全反过来；

表单元素 - 只能使用value 来取值赋值
表单元素.value = "值";
var s = 表单元素.value;

操作相关元素：

注意：哥哥级，弟弟级，后辈级注意回车和空格

document.createElement('标记名'); - 动态创建dom对象
a.appendChild(对象); 往a标记中添加一个子级元素，添加的位置是最末尾

js 操作属性，操作内容，的更多相关文章

  1. jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  2. 2016/4/1 jquery 与javascript关系 ①取元素 ②操作内容 ③操作属性 ④操作 样式 ⑤ 事件 点击变色

    jQuery的min版本和原版功能是一样的,min版主要应用于已经开发成的网页中,而非min版 的文件比较大,里面有整洁的代码书写规范和注释,主要应用于脚本开发过程当中. JQuery是继protot ...

  3. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  4. jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件

    jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...

  5. jQuery-对标签元素 文本操作-属性操作-文档的操作

    一.对标签元素文本操作 1.1 对标签中内容的操作 // js var div1 = document.getElementById("div1"); div1.innerText ...

  6. Dom样式操作-属性操作

    1. 对样式进行操作: 1) 以样式(C1,C2等)为最小单位进行修改. className, classList, (以列表形式获得) classList.add("C2"), ...

  7. dom操作 属性操作 样式操作

    jQuery DOM操作 1 插入子元素 append('<img>') 插后面 被插入元素调用 appendTo('<img scr="...">') 新 ...

  8. js基础——属性操作

    html属性:属性名——属性值 操作:读 . 写 读操作:用来获取.找到属性名对应的属性值,方法:元素.属性名 例如:var oBtn = document.getElementById('btn1' ...

  9. JS Attribute属性操作

    Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍. attributes:获取一个属性作为对象 getAttribute:获取某一个属性的值setAttribu ...

  10. jQuery总结02_jq的dom操作+属性操作

    一:JQuery知识点 *:JQuery的dom操作 *:获取节点.给节点添加内容 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并 ...

随机推荐

  1. 29 python 并发编程之多线程理论

    一 什么是线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 车间负责把资源整合 ...

  2. 15 Python 迭代器和生成器

    什么是迭代 (iterable) 字符串.列表.元组.字典.集合都可以被for循环,说明他们都是可迭代的. 可以直接作用于for循环的对象统称为可迭代对象(Iterable). 可以被next()函数 ...

  3. Hadoop2.5.2+HA+zookeeper3.4.6详细配置过程

    心血之作,在熟悉hadoop2架构的过程耽误了太长时间,在搭建环境过程遇到一些问题,这些问题一直卡在那儿,不得以解决,耽误了时间.最后,千寻万寻,把问题解决,多谢在过程提供帮助的大侠.这篇文章中,我也 ...

  4. DataTable的用法

    在项目中经常用到DataTable,如果DataTable使用得当,不仅能使程序简洁实用,而且能够提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 一.DataTable简 ...

  5. python二分查找模块bisect

    bisect模块用于二分查找,非常方便. Bisect模块提供的函数有: 1.查找 bisect.bisect_left(a,x, lo=0, hi=len(a)) : 查找在有序列表a中插入x的in ...

  6. HDU4940 Destroy Transportation system(有上下界的最大流)

    Problem Description Tom is a commander, his task is destroying his enemy’s transportation system. Le ...

  7. Storm实时计算：流操作入门编程实践

    转自:http://shiyanjun.cn/archives/977.html Storm实时计算:流操作入门编程实践   Storm是一个分布式是实时计算系统,它设计了一种对流和计算的抽象,概念比 ...

  8. BZOJ2784: [JLOI2012]时间流逝

    BZOJ2784: [JLOI2012]时间流逝 https://lydsy.com/JudgeOnline/problem.php?id=2784 分析: 挺有意思的一道题. 注意到状态数是\(P( ...

  9. FastAdmin 中的 formatter flag 分析

    FastAdmin 中的 formatter flag 分析 效果 首先看看效果,这里的文字和颜色可以根据数据改变. 这是系统自带的分类管理. 代码 功能在 \public\assets\js\bac ...

  10. Cloudera API访问

    多租户管理页面(admin)操作 cloudera 管理页面页面操作多租户是这样的: 进入到YARN的服务页面,点击Resource Pool,你将会看到已经存在的资源池,然后再点击资源池表格右上角的 ...