码迷,mamicode.com
首页 > Web开发 > 详细

07.30《jQuery》——1.4修改CSS样式

时间:2018-07-31 01:29:47      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:idt   ali   bubuko   htm   --   value   另一个   .com   属性   

1.单一修改样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            #aaa{
                height: 100px;
                width: 100px;
                background-color: red;
            }
        </style>
        <script src="../jquery-3.2.1/jquery-3.2.1.js" type="text/javascript">
            
        </script>
        <script type="text/javascript">
            $(function(){
                $("#btn").click(function(){
                    $("#aaa").css({
                        "height":200,
                        "width":200,
                        "background-color":"yellow"
                    })
                })
            })
        </script>
    </head>
    <body>
        <div id="aaa">
            呦呦呦~~man,come on!
        </div>
        <input type="button" name="btn" id="btn" value="按我换格式" />
    </body>
</html>

这样修改出来的样式结果为

技术分享图片       --------------》技术分享图片

这种方式只是单一的改变CSS样式某一或多个属性

 

2.修改整套样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            #aaa{
                height: 100px;
                width: 100px;
                background-color: red;
            }
            #bbb{
                height: 300px;
                width: 300px;
                background-color: aliceblue;
            }
        </style>
        <script src="../jquery-3.2.1/jquery-3.2.1.js" type="text/javascript">
            
        </script>
        <script type="text/javascript">
            $(function(){
                $("#btn").click(function(){
                    $("#aaa").attr("id","bbb");
                })
            })
        </script>
    </head>
    <body>                  
        <div id="aaa">
            呦呦呦~~man,come on!
        </div>
        <input type="button" name="btn" id="btn" value="按我换格式" />
    </body>
</html>

是将整个的CSS样式代码转换为另一个CSS样式,是将整个风格进行转变。

 

07.30《jQuery》——1.4修改CSS样式

标签:idt   ali   bubuko   htm   --   value   另一个   .com   属性   

原文地址:https://www.cnblogs.com/justlive-tears/p/9393669.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!