基本属性的操作-2018-04-04

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <meta charset="UTF-8">
    <title>属性与自定义属性的操作</title>
</head>
<body>
<img src="images/gyy.jpg"   id="pic" alt="美女" title="明星" data-name="周芷若">
</body>
<script type="text/javascript">
    // attr方法 可以获取元素的任何属性、可以设置元素的任何属性 包括自定义属性
    // prop方法 只能获取设置元素的固有属性
    // data方法 只可以设置获取元素的自定义属性 设置属性时可以省略data-前缀 但是动态添加的属性前缀不可省略

    //1、获取属性值
    // var res =$('img').attr('src');
    //2、获取自定义属性
    // var res =$('img').attr('data-name');
    //3、设置属性的值
    // var res =$('img').attr('title','女明星');
    //4、设置属性为一个回调函数
    // var res = $('img').attr('width',function () {
    //     return 200;
    // })
    //5、设置多个属性
    // var res = $('img').attr({
    //    'width':200,
    //    'height':200
    // });

    // CSS方法
    //1、获取高度
    //  var res =$('img').css('width');
    //2、设置高度
    // var res =$('img').css('width','100px');
    //3、同时设置多个属性
    // var res =$('img').css({
    //     'width':'100px',
    //     'height':'100px'
    // });
    //4、获取高度height方法
    // var res = res =$('img').height();
    //5、设置高度
 var res = res =$('img').height(200);
    //6、增加高度
 var res = res =$('img').height('+=100');
    //7、获取offset
 var res = res =$('img').offset();
    //8、获取position
 var res = res =$('img').position();
    console.log(res);
</script>
</html>
相关文章
