博客列表 >4月4日 设置内联样式CSS

4月4日 设置内联样式CSS

威灵仙的博客
威灵仙的博客原创
2018年04月06日 10:20:12932浏览

结果图:

QQ图片20180406101926.png

代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>设置内联样式CSS</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">


      .container{
            width: 400px;
            height:400px;
            background-color: lightgray;
            position: absolute;
            left:100px;
            top:100px;
        }

        img{
            width: 300px;
            height: 300px;
            position: relative;
            top: 50px;
            left: 60px;
        }

    </style>

    </script>
</head>
<body>
    <div class="container">
       <img src="https://gss3.bdstatic.com/84oSdTum2Q5BphGlnYG/timg?wapp&quality=80&size=b150_150&subsize=20480&cut_x=0&cut_w=0&cut_y=0&cut_h=0&sec=1369815402&srctrace&di=43611e0509653556bddd8365edea569b&wh_rate=null&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fb21c8701a18b87d6ad4b14bb060828381f30fd0d.jpg" alt="">
    </div>
</body>
   <script type="text/javascript">
        //attr方法
        $('img').attr('style','box-shadow:4px 4px 5px #888')
        //CSS方法
        $('img').css('border-radius','10%')
         //width方法
        $('img').width(350)
         //height方法
        $('img').height(350)
        // offset方法 查询距离左边和顶部的偏移量
       var res = $('img').offset().top
       var res = $('img').offset().left
       // position方法 查询在父级区块中的偏移量
       var res = $('img').position().top
       var res = $('img').position().left

       $('.container').width('+=60').height('+=50')
     //控制台查看结果
    console.log(res)
   </script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议