简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 自定义属性与样式操作
Blogger Information
Blog 14
fans 0
comment 0
visits 11824
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
自定义属性与样式操作
JUNL的博客1111
Original
719 people have browsed it

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.属性与自定义属性操作:attr() 和removeattr()</title>
</head>
<body>
<img src="image/001.jpg" width="300" alt="美女" title="明星" id="pic" data-nation="中国">
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
    //预备知识:读取器,设置器
    //1.有一些函数,可以根据参数的数量不同,执行不周的功能,返回不同的值,类似于功能重载
    //2.传入一个参数,读取操作getter,返回该参数的当前值,叫读取器/获得器
    //3.传入二个参数执行赋值操作setter,修改当前参数的值,叫:设置器/修改器
    //4.这种根据参数个数决定执行操作类型的方法,在JQERY中非常多,大家要留意
    //1.attr() :元素属性的获取与设置
    //必须传参
    //var res=${'img'}.attr()
    //单参数为获取:当前属性的值
    //var res=$('#pic').attr('src')
    //双参数为获取,第一个是属性名,第二个是要设置的新值
    $('#pic').attr('src','/image/002.jpg')
    $('#pic').attr('style','border-radius:50%;box-shadow:10px 10px 10px #333')
    //由此可见, attr()是典型的集读取器与设置器二合一的方法
    // attr()可以获取到元素的自定义属性
    //HTML5中可以通过data 前缀给标签用户自定义属性
    var res=$('#pic').attr('data-nation')
    //attr()的属性值 还支持回调函数
    //$('#pic').attr('width',function(){ return 100+50})
    //注意:回调返回的数值类型,会自动转为字符类型再赋值给WIDTH属性
    //var res=$('#pic').attr('width')
    //2.removeAttr():删除元素的属性
    //删除图片的内联样式属性STYLE
    //$('#pic').removeAttr('style')
    //可以删除多个属性,多个属性之间用空格分开,返回当前元素的状态
    var res=$('#pic').removeAttr('alt title data-nation')
    //在控制台查看运行结果
     console.log(res)
</script>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.元素故有属性的操作: prop()和removeProp()</title>
</head>
<body>
<img src="image/001.jpg" width="300" alt="美女" title="明星" id="pic" data-nation="中国">
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
    //1.Prop():仅能获取元素的固有属性
    //获取固有属性:alt title
    var res=$('#pic').prop('alt')
    var res=$('#pic').prop('title')
    // 获取自定义属性data-nation, 返回undefined 获取不到
    var res=$('#pic').prop('data-nation')
    //但是如果使用prop()进行动态设置自定义属性后,就可以正常获取到
    var res=$('#pic').prop('data-nation','中国山东')
    //此时查看元素,发现自定义属性并未发生变化,所以这种设置对元素无影响
    //此时再次查看自定义属性值,只是存在于当前脚本的一个临时数据
    var res=$('#pic').prop('data-nation')
    //2.removeprop()
    // 这个方法与removeattr()有两点不同
    //1.它不支持空格分隔的属性列表字符串,即每次只能删除一个属性
   // var res=$('#pic')removeProp('alt data-nation')
    //2.它不支持删除原生属性,如果真要删除,要将值设为false可
    //删除原生固有属性
      // var res = $('#pic').removeProp('data-nation')
      //var res=$('#pic').removeProp('alt')
    //用removeAttr()删除原生属性alt, 删除成功
      // var res=$('#pic').removeAttr('alt')
    //所以,如果要用removeProp()删除原生属性,大多数下将值设为  false即可
    //最终由用户脚本自行处理
    var res=$('#pic').prop('alt',false)
    var res=$('#pic').Prop('alt')


    console.log(res)
</script>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.在元素中存储数据:data()</title>
</head>
<body>
<img src="../image/001.jpg" width="200" alt="PHP中文网" title="朱老师"
     id="pic" data-job="php中文网朱老师">

</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
    //data(): 读取元素中以 data 开始的自定义数据,可以省略 data前缀
    //var res=$('#pic').data('job')
    //如果用之前的attr()方法必须写出完整的属性名
     //var res=$('#pic').attr('data-job')
    //data()也是一个自带读取器和设置器的方法
    $('#pic').data('data-course','PHP程序开发课程')
    //如果是动态设置的自定义属性,省略前缀是获取不到的
    //var res=$('#pic').data('course')
    //需要加上前缀
     var res=$('#pic').data('data-course')
    //data()能获取元素上的原生属性吗?无法读取
    var res=$('#pic').data('title')
    //但是支持动态设置title属性,仅限于脚本中使用,原始值并未发生变化
     var res=$('#pic').data('title','hellow')
    //现在就可以在脚本中读取title的值,尽管这个值与原生的alt不同
    var res=$('#pic').data('title')
    //同样, data()也有一个对应的 removeData()用来删除自定义或由它创建的属性
    var res=$('#pic').removeData('title')
    var res=$('#pic').removeData('data-Course')
    var res=$('#pic').data('data-course')

    //原始标签自带的自定义属性中删除不了
    var res=$('#pic').removeData('data-job')
     var res= $('#pic').data('job')
    console.log(res)
    </script>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.设置元素的类样式</title>
    <style type="text/css">
    .circle{border-radius:50%;}
    .shadow{box-shadow:30px 30px 30px #888}
    </style>
</head>
<body>
<img src="../image/001.jpg" width="300" id = "pic">
<!--<img src="../image/001.jpg"  class="circle" width="300" id = "pic">-->
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>

<script type="text/javascript">
  /*设置元素的类样式
 //1 设置元素标签的CLASS属性:应用的类样式,样式表中的
 //2 直接设置标签元素的STYLE属性,内联样式
 //1 AddClass()*/
 //$('#pic').addClass('circle')
  //$('#pic').addClass('shadow')
  $('#pic').addClass('shadow circle')


  //2 .removeClass()
  //$('#pic').removeClass('circle')
  //$('#pic').removeClass('shadow')
  $('#pic').removeClass('shadow circle')

  //3 样式的自动切换:toggleClass
  //如果当前元素没有该样式,就自动添加,如果有,就自动删除
  $('#pic').toggleClass('circle shadow')



console.log(res)
</script>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5.设置内联样式 css()</title>
    <style type="text/css">
        .box1{
            width:300px;
            height:300px;
            background-color:wheat;
            position:relative;
        }
        .box2{
            width:100px;
            height:100px;
            background-color:lightgreen;
            position:absolute;
            top:50px;
            left:100px;
        }
        </style>
</head>
<body>
<img src="../image/001.jpg"  style="width:200px;" border>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>

<script type="text/javascript">
    //css()和attr()类似, 自带getter/setter
    //1 设置样式: css(name [,value])
   // var res = $('img').css('width',500)
    //var res=$('img').css('border-radius','10%')
    //var res= $('img').css('box-shadow','30px 30px 30px #888')
    // 链式操作

    //var res = $('img').css('width',500)
                    //    .css('border-radius','10%')
                      //   .css('box-shadow','30px 30px 30px #888')
  // var res=$('img').css({'width':'200px','border-radius':'50%','box-shadow':'5px 5px 5px #888'})
   var res=$('img').css({"width":"200px","border-radius":"50%","box-shadow":"5px 5px 5px #888"})
  var res=$('img').css('width')
    var res=parseInt($('img').css('width'))

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

    //3.height(),width()
    //var res=$('img').width()
    var res=$('img').width(200)
    //var res=$('img').width('100px')
    //var res=$('img').width('+=200')
    //4.offset()
    var res = $('img').offset()
    var res = $('img').offset().top+'px'
    var res = $('img').offset().left+'px'
    //5.position
     var res= $('.box2').position()
    var res= $('.box2').position().left

    //6.scrollLeft()返回水平滚动条的位置
    //scrollTop()返回垂直滚动条的位置



    console.log(res)
    </script>

运行实例 »

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


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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！