原始JS修改样式属性

最新推荐文章于 2023-05-09 13:45:41 发布

柠檬加栤

最新推荐文章于 2023-05-09 13:45:41 发布

阅读量97

点赞数

本文链接：https://blog.csdn.net/m0_57071129/article/details/118974021

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
            color: pink;
            font-size: 75px;
            background:yellow;
            border:1px solid #000;
        }
        .p2{
            color: blue;
            font-size: 16px;
           
        }
    </style>
</head>
<body>
    <div style="color: aqua;">小雪</div>
    <p class="p2">圣伊博</p>

    <button>点击</button>
    <img src="2wm.png" alt="" srcset="">



    <input type="text" placeholder="手机">
</body>
<script>
    // 1.点击div时，修改div中的文字颜色和字体大小
    // 2.点击p元素时，修改p中的文字颜色、字体大小、添加边框线、添加背景色

    var div=document.querySelector("div")
    var p=document.querySelector("p")


    div.onclick=function(){
        this.style.color='red';
        this.style.fontSize="26px";
    }


    
    p.onclick=function(){
       this.className="p1"

    }



    var btn=document.querySelector("button")
    var img=document.querySelector("img")

    btn.onclick=function(){
        img.style.display="none"
        this.style.display="none"
    }



    var inp=document.querySelector("input")
    inp.onfocus=function(){
        inp.placeholder="";
    }
    inp.onblur=function(){
        inp.placeholder="手机";
    }
</script>
</html>

柠檬加栤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
原始JS修改样式属性

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫