博客列表 >jquery的内联样式设置方法

jquery的内联样式设置方法

梁凯达的博客
梁凯达的博客原创
2018年05月07日 20:55:581765浏览

重点:

1、基础的jquery写法,格式为:$('标签').css('值')

2、链式写法:

  var res=$('img')

        .css('width','200px')

          .css('height','200px')

            .css('border-radius','50%')

3、parseInt(包裹),parseInt是用于转化整个索引元素为数值的函数方法

4、字符串拼接: var res=$('img').css('width',res+'px')

5、+=,X+=2是等价于X=X+2

6、offset()用于获取某个元素的偏移

7、pisition()用于获取某个函数的定位

-

-

-

以下为代码部分:

<!DOCTYPE html>

<html>

<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>

</head>

<body>

   <img src="img/001.jpg"/>

</body>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$('img').css('width','300px')

// 最基础的内联样式修改方法,格式为:$('标签').css('值')

var res=$('img').css('width','200px')

// var res=$('img').css('width')

        //以下为链式操作方法

        var res=$('img')

        .css('width','200px')

          .css('height','200px')

            .css('border-radius','50%')

        //以下为js结构操作方法

//      var res=$('img').removeAttr('style')

        var res=$('img').css({

         'border-radius':'50%',

         'width':'200px',

         'box-shadow':'2px 2px 2px black',

        })

        var res=$('img').removeAttr('style')

        var res=parseInt($('img').css('width'))

        //parseInt写法主要包裹了某个索引,并将索引转化为数值

        res+=100

        //数值res为200,res+=100等价于res=res+100(res=200+100)

        var res=$('img').css('width',res+'px')

        //增加宽度并使宽度赋上单位Px

        console.log(res)

        

//      

    var res=$('img').width(100)

    //函数  width()写法,简单的获取到width

    res+=200

    //res赋值了100,此处=300

    var res=$('img').width(res+500,'px')

   

     console.log(res)

     

        

</script>

</html>


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