Blogger Information
Blog 250
fans 3
comment 0
visits 321778
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery的内联样式设置方法
梁凯达的博客
Original
1766 people have browsed it

重点:

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>


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post