实现思路:
在实现留言板focus文字上移和变小的时候单写一个可以实现
但是发现多写时需要三个queryselectorall又需要循环但是想到有两个兄弟级又有点不好写
因为拿children可能比较简单
问题:
想问以下代码为什么不能实现?
<div class="ipt">
<h3>在线留言</h3>
<div class="row">
<div class="ipt_move">
<span>姓名</span>
<input type="text">
</div>
<div class="ipt_move">
<span>性别</span>
<input type="text">
</div>
</div>
<div class="row">
<div class="ipt_move">
<span>年龄</span>
<input type="text">
</div>
<div class="ipt_move">
<span>爱好</span>
<input type="text">
</div>
</div>
<div class="row">
<div class="ipt_move">
<span>请留下你的足迹</span>
<input type="text">
</div>
</div>
<button>提交</button>
</div>
var ipt_move = document.querySelectorAll('.ipt_move');
for (var i = 0;i<ipt_move.length;i++) {
ipt_move[i].addEventListener('focus',function(){
this.children[0].style.transform = 'translateY('+(-120)+'%)';
this.children[0].style.fontSize = '14px';
})
ipt_move[i].addEventListener('blur',function(){
this.children[0].style.transform = 'translateY('+(-50)+'%)';
this.children[0].style.fontSize = '20px';
})
}