博客列表 >jquery attr css方法——2018年4月5日8时03分

jquery attr css方法——2018年4月5日8时03分

沈斌的博客
沈斌的博客原创
2018年04月05日 08:10:05662浏览

jQuery attr方法:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery attr</title>
</head>
<body>
    <img src="./img/view.jpg" alt="view" title="风景" width="300" >
</body>

<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    // 获取固有属性
    var attr=$('img').attr('alt')

    // 设置固有属性
    var attr=$('img').attr('width',400)
    var attr=$('img').attr('style','border-radius:50%;box-shadow:3px 3px 3px #888')

    var attr=$('img').attr('width',function(){ return 400-200})

    // 设置自定义属性
    var size=$('img').attr('data-size')
    $('img').removeAttr('style')

    console.log(attr)
</script>
</html>

运行实例 »

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

jquery css 方法:

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery css 方法</title>
</head>
<body>
    <img src="./img/freeze.jpg" alt="freeze" title="云">
</body>

<script type="text/javascript" src="./js/jquery-3.3.1.js"></script>

<script type="text/javascript">
    var attr=$('img').css('width',200)
    var attr=$('img').css('border-radius','20%')
    var attr=$('img').css('box-shadow','3px 3px 3px #66997B')
    // 合并写法
    var attr=$('img').css({
        'width':'200',
        'border-radius':'20%',
        'box-shadow':'3px 3px 3px #66997B'
    })

    var res=$('img').css('box-shadow')

    // 宽,高
    var attr=$('img').width(300)
    var attr=$('img').width()
    var attr=$('img').height(300)
    var attr=$('img').height()

    var res=$('img').offset()
    // left,top 属性
    var res=$('img').offset().left
    var res=$('img').offset().top

    // 绝对定位
    var res=$('img').position().left
    var res=$('img').position().top

    var res=$('img').scrollLeft()
    var res=$('img').scrollTop()


    console.log(res)

</script>
</html>

运行实例 »

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

jquery attr 方法可以获取标签的固有属性和自定义属性,同时也可以设置固有,自定义属性。自定义属性设置时加data-前缀,获取标签中的data-XX属性不需要加前缀。

jquery css 方法设置属性,可以将多个css属性写在一起。获取宽高时用heigh(),wid替换()方法,更便捷。


手抄:

cssm.jpg

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