码迷,mamicode.com
首页 > 其他好文 > 详细

DOM——属性操作

时间:2019-10-26 23:06:29      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:方式   美女   图片切换   keyword   兼容   输入框   属性   rop   反选   

属性操作

非表单元素的属性

href、title、id、src、className

 var link = document.getElementById(‘link‘);
 console.log(link.href);
 console.log(link.title);
 ?
 var pic = document.getElementById(‘pic‘);
 console.log(pic.src);

案例:

点击按钮显示隐藏div

美女相册

  • innerHTML和innerText

 var box = document.getElementById(‘box‘);
 box.innerHTML = ‘我是文本<p>我会生成为标签</p>‘;
 console.log(box.innerHTML);
 box.innerText = ‘我是文本<p>我不会生成为标签</p>‘;
 console.log(box.innerText);
  • HTML转义符

 "       &quot;
  &apos;
 & &amp;
 < &lt;   // less than 小于
 > &gt;   // greater than 大于
 空格   &nbsp;
 © &copy;
  • innerHTML和innerText的区别

  • innerText的兼容性处理

表单元素属性

  • value 用于大部分表单元素的内容获取(option除外)

  • type 可以获取input标签的类型(输入框或复选框等)

  • disabled 禁用属性

  • checked 复选框选中属性

  • selected 下拉菜单选中属性

案例

  • 点击按钮禁用文本框

  • 给文本框赋值,获取文本框的值

  • 检测用户名是否是3-6位,密码是否是6-8位,如果不满足要求高亮显示文本框

  • 设置下拉框中的选中项

  • 搜索文本框

  • 全选反选

自定义属性操作

  • getAttribute() 获取标签行内属性

  • setAttribute() 设置标签行内属性

  • removeAttribute() 移除标签行内属性

  • 与element.属性的区别: 上述三个方法用于获取任意的行内属性。

样式操作

  • 使用style方式设置的样式显示在标签行内

 var box = document.getElementById(‘box‘);
 box.style.width = ‘100px‘;
 box.style.height = ‘100px‘;
 box.style.backgroundColor = ‘red‘;
  • 注意

    通过样式属性设置宽高、位置的属性类型是字符串,需要加上px

类名操作

  • 修改标签的className属性相当于直接修改标签的类名

 var box = document.getElementById(‘box‘);
 box.className = ‘show‘;

案例

  • 开关灯

  • 点击按钮改变div的背景颜色

  • 图片切换二维码案例

  • 当前输入的文本框高亮显示

  • 点击按钮改变div的大小和位置

  • 列表隔行变色、高亮显示

  • tab选项卡切换

DOM——属性操作

标签:方式   美女   图片切换   keyword   兼容   输入框   属性   rop   反选   

原文地址:https://www.cnblogs.com/superjishere/p/11745681.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!