3/1学习记录(JavaScript学习中)
修改表单属性
type,value,checked,disabled
案例应用:仿京东显示隐藏密码:
style>
.box{
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input{
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img{
position: absolute;
top: 2px;
right: 2px;
width: 2px;
}
</style>
<body>
<div class="box">
<button id="xs">显示</button>
<button id="yc">隐藏</button>
<input type="password" name="" id="pwd">
</div>
<script>
var xs = document.getElementById('xs');
var yc = document.getElementById('yc');
var pwd = document.getElementById('pwd');
xs.onclick=function(){
pwd.type='text';
}
yc.onclick=function(){
pwd.type='password';
}
</script>
</body>
</html>
效果图:
样式属性操作
案例应用1:点击颜色区域使颜色改变
<style>
div{
width: 300px;
height: 300px;
background-color: aquamarine;
}
</style>
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function(){
this.style.backgroundColor='orange';
}
</script>
案例2:仿淘宝关闭广告
<style>
img{
width: 300px;
height: 300px;
border: 2px solid black;
margin-top: 10px;
}
.close-btn{
position: absolute;
top: -1px;
border: 1px solid #ccc;
cursor: pointer;
}
</style>
<div class="box">
广告图片
<img src="icon_tdctf9hom2l/faxian.png" alt="">
<sapn class="close-btn" >X</span>
</div>
<script>
var btn = document.querySelector(".close-btn");
var box = document.querySelector(".box");
btn.onclick = function(){
box.style.display='none';
}
</script>
循环精灵图
显示隐藏文本内容
使用className修改样式属性
适用于样式较多或功能较复杂的情况,相当于把样式或功能封装在一个css类中,给需要修改的部分直接加上类名。如果想要保留原来的类名,可使用多类名选择器:“旧 新”。
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
}
.change{
width: 300px;
height: 300px;
background-color:yellow;
}
</style>
<div>点击改变</div>
<script>
var test = document.querySelector("div");
test.onclick = function(){
this.className='change'
}
</script>
</body>
</html>
密码框验证信息(白烂了)