JS day27 修改样式属性操作元素总结

最新推荐文章于 2021-07-21 18:10:18 发布

肝JOJO

最新推荐文章于 2021-07-21 18:10:18 发布

阅读量143

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34620296/article/details/101127157

版权

JavaScript 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

*我们可以通过JS修改元素的大小颜色位置等样式

注:
①JS里面的样式采用驼峰命名法,比如:fontSize,backgroundColor
②JS修改style样式产生的是行内样式,权重为1000
1.element.style 行内样式操作 (样式比较少时使用)

例1:点击div改变它的颜色和宽度

<style>
    div{
         width: 200px;
         height: 200px;
         background-color: pink;
        }
</style>

<script type="text/javascript">
 window.onload=function(){
    var div=document.querySelector(".a"); 
    var flag=true;
    div.onclick=function(){
        if(flag==true){
            div.style.backgroundColor="purple";  //或者是
            //this.style.backgroundColor="purple";
            div.style.width="250px";
            flag=false;
        }else{
            div.style.backgroundColor="pink";  //或者是
            //this.style.backgroundColor="purple";
            div.style.width="200px";
            flag=true;
        }
    }
}
</script>
</head>
<body>
    <div class="a"></div>   
</body>

2.element.className 类名样式操作
例2:将要改变的样式写到CSS中,然后改变其类名即可

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .change{
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
    
    <script type="text/javascript">
  	  window.onload=function(){
        var div=document.querySelector("div");
        div.onclick=function(){
            div.className="change";  //当前元素类名变为change 
            //div.className="first change "   //要保留原先的类名 first change
        }
    }
    </script>
    
<body>
    <div class="first">哈哈哈哈哈</div>   
</body>

例3:密码框错误信息提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    div{
        width: 600px;
        margin: 100px auto;
    }
    .message{
        display:inline-block;
        font-size: 12px;
        color: #999;
        padding-left: 24px;
    }
    .wrong{
        color: red;
        background: url(img/红色.png) no-repeat left center;
    }
    .right{
        color: green;
        background: url(img/绿色.png) no-repeat left center;
    }
    
    </style>
    <script type="text/javascript">
    /*
    分析:
        1.判断的事件是失去焦点onblur
        2.如果输入正确则变为绿色小图标  加提示文字
        3.输入错误则变为红色小图标 加提示文字
        4.使用className修改样式  
    */
    window.onload=function(){
        var ipt=document.querySelector(".ipt");
        var message=document.querySelector(".message");
        ipt.onblur=function(){
            if(ipt.value.length<6 ||ipt.value.length>16){ //判断密码长度
                message.className="message wrong";
                message.innerHTML="输入密码长度错误,请输入6~16位";
            }else{
                message.className="message right";
                message.innerHTML="输入密码符合要求";
            }
        }
    }
       
    </script>
</head>
<body>
    <div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
    </div>
    
</body>
</html>

例4.点击X关闭图片

<style>
    .box img{
        width: 100px;
        margin-top: 5px;
    }
    .close{
        position: absolute;
        top: 15px;
        left: 12px;
        width: 14px;
        height: 14px;
        border: 1px solid #ccc;
        line-height: 14px;
        font-family: Arial, Helvetica, sans-serif;
        cursor: pointer;        
    }       
    </style>
    <script type="text/javascript">
    	window.onload=function(){
        	var box=document.querySelector(".box")
        	var close=document.querySelector(".close");
        	close.onclick=function(){
            box.style.display="none";  //隐藏盒子
        }
    }
    </script>
    

</head>
<body>
        <div class="box">
                <img src="img/孙笑川.jpg" alt="">
                <i class="close">x</i>
            </div>
    
</body>

例5.仿我的京东案例

	<style>
        .title{
            position: relative;
            top: 10px;
            width:65px;
            height: 30px;
            background-color: pink;
            cursor: pointer;
            overflow: hidden;
        }
        p{
            position: relative;
            /* 相对定位，相对于其正常的位置定位 */
            top: -10px;
        }   
        .mouse{
            height: 140px;
        }
    </style>

	<script type="text/javascript">
        window.onload=function(){
            var title=document.querySelector('.title');
            title.onmouseover =function(){
                title.className="title mouse"
            }
            title.onmouseout=function(){
                title.className="title";
            }
        }
    </script>

<body>
    <div class="title">
        <p>我的京东</p> 
        <p>订单</p>
        <p>购物车</p>
        <p>我的白条</p>
    </div>    
</body>

总结:

在这里插入图片描述

肝JOJO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS day27 修改样式属性操作元素总结

*我们可以通过JS修改元素的大小颜色位置等样式注:①JS里面的样式采用驼峰命名法,比如:fontSize,backgroundColor②JS修改style样式产生的是行内样式,权重为10001.element.style 行内样式操作2.element.className 类名样式操作例如1:点击div改变它的颜色和宽度<style> div{ ...
复制链接

扫一扫