js操作元素相关案例
案例：
循环精灵图背景
- 可以利用for循环设置一组元素的精灵图
案例分析：
<script>
//1.获取元素 所有的小li
var lis = document.querySelectorAll('li');
for(var i=0;i<lis.length;i++)
{
//让索引号 乘以44就是每个li 的背景y 坐标 index就是我们的y坐标
var index = i * 44;
lis[i].style.backgroundPosition = '0 -' + index + 'px';
}
</script>
案例：显示隐藏文本框内容
- 当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。
案例分析
<body>
<input type="text" value="手机">
<script>
//1.获取元素
var text = document.querySelector('input');
//2.注册事件 获得焦点事件 onfocus
text.onfocus = function(){
// console.log('得到了焦点');
if(this.value === '手机'){
this.value = '';
}
//获得焦点需要把文本框里面的蚊文字颜色变黑
this.style.color = '#333';
}
//3.注册事件 失去焦点事件 onblur
text.onblur = function(){
// console.log('失去了焦点');
if(this.value === ''){
this.value = '手机';
}
//失去焦点需要把文本框里面的蚊文字颜色变黑
this.style.color = '#999';
}
</script>
</body>
样式属性操作
案例：密码框格式提示错误信息
- 用户如果离开密码框，里面输入个数不是6-16，则提示错误信息，否则提示输入正确信息
案例分析：
操作元素总结
- 操作元素是DOM核心内容
JAvascript前端系列 文章被收录于专栏
本专栏收录前端web知识点
