web前端 -JavaScript学习之路

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>

密码框验证信息（白烂了）

web前端 -JavaScript学习之路

猜你喜欢