zoukankan      html  css  js  c++  java
  • jQuery css操作

    jQuery

    css操作

    1)css
    2)位置
    3)尺寸
    

    1.css操作之css

    css(name|pro|[,val|fn])   
    当你使用CSS属性在css()或animate()中,我们将根据浏览器自动加上前缀(在适当的时候),在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".
    

    2.css操作之位置

    (1)offset([coordinates])

    返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
    coordinates{top,left}
    必需。规定以像素计的 top 和 left 坐标。
    可能的值:
    值对,比如 {top:100,left:0} 
    带有 top 和 left 属性的对象
    

    (2)position()

    获取匹配元素相对父元素的偏移。
    返回的对象包含两个整型属性:top 和 left。
    例如:
    HTML 代码:
    <p>Hello</p><p>2nd Paragraph</p>
    jQuery 代码:
    var p = $("p:first");
    $("p:last").text( "scrollTop:" + p.scrollTop() );
    结果:
    <p>Hello</p><p>scrollTop: 0</p>
    

    (3)scrollTop([val])

    获取匹配元素相对滚动条顶部的偏移。
    val:设定垂直滚动条值
    例如:
    HTML 代码:
    <p>Hello</p><p>2nd Paragraph</p>
    jQuery 代码:
    var p = $("p:first");
    $("p:last").text( "scrollTop:" + p.scrollTop() );
    结果:
    <p>Hello</p><p>scrollTop: 0</p>。
    

    (4)scrollLeft([val])

    获取匹配元素相对滚动条左侧的偏移。
    HTML 代码:
    <p>Hello</p><p>2nd Paragraph</p>
    jQuery 代码:
    var p = $("p:first");
    $("p:last").text( "scrollLeft:" + p.scrollLeft() );
    结果:
    <p>Hello</p><p>scrollLeft: 0</p>
    

    3.css操作之尺寸

    (1)height([val|fn])

    取得匹配元素当前计算的高度值(px)。
    val
    设定CSS中 'height' 的值,可以是字符串或者数字,还可以是一个函数,返回要设置的数值。函数接受两个参数,第一个参数是元素在原先集合中的索引位置,第二个参数为原先的高度。
    

    (2)width([val|fn])

    取得第一个匹配元素当前计算的宽度值(px)。
    val
    设定CSS中 'width' 的值,可以是字符串或者数字,还可以是一个函数,返回要设置的数值。函数接受两个参数,第一个参数是元素在原先集合中的索引位置,第二个参数为原先的宽度。
    

    (3)innerHeight()

    获取第一个匹配元素内部区域高度(包括补白、不包括边框)。
    例如:
    获取第一段落内部区域高度。
    HTML 代码:
    <p>Hello</p><p>2nd Paragraph</p>
    jQuery 代码:
    var p = $("p:first");
    $("p:last").text( "innerHeight:" + p.innerHeight() );
    结果:
    <p>Hello</p><p>innerHeight: 16</p>
    

    (4)innerWidth()

    获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。
    例如:
    获取第一段落内部区域宽度。
    HTML 代码:
    <p>Hello</p><p>2nd Paragraph</p>
    jQuery 代码:
    var p = $("p:first");
    $("p:last").text( "innerWidth:" + p.innerWidth() );
    结果:
    <p>Hello</p><p>innerWidth: 40</p>
    

    (5)outerHeight([options])

    获取第一个匹配元素外部高度(默认包括补白和边框)。
    例如:
    HTML 代码:
    <p>Hello</p><p>2nd Paragraph</p>
    jQuery 代码:
    var p = $("p:first");
    $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
    结果:
    <p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>
    

    (6)outerWidth([options])

    获取第一个匹配元素外部宽度(默认包括补白和边框)。
    例如:
    HTML 代码:
    <p>Hello</p><p>2nd Paragraph</p>
    jQuery 代码:
    var p = $("p:first");
    $("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
    结果:
    <p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>
  • 相关阅读:
    ORA-01935: missing user or role name
    ORA-00923: FROM keyword not found where expected
    ORA-00933: SQL command not properly ended
    ORA_12514:TNS:listener does not currently know of service requested in connect descriptor
    ORA-00918: column ambiguously defined
    ORA-01789: 查询块具有不正确的结果列数
    ORA-01789: query block has incorrect number of result columns
    ORA-01747
    ORA-01843: not a valid month
    ORA-00904: "I_LEVEL": invalid identifier
  • 原文地址:https://www.cnblogs.com/WWWrs/p/6850171.html
Copyright © 2011-2022 走看看