标签:方式 美女 图片切换 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转义符
" "
‘ '
& &
< < // less than 小于
> > // greater than 大于
空格
© ©
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选项卡切换
标签:方式 美女 图片切换 keyword 兼容 输入框 属性 rop 反选
原文地址:https://www.cnblogs.com/superjishere/p/11745681.html