jQuery css,position,offset,scrollTop,scrollLeft用法:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta charset="UTF-8">

<title>b index</title>

<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>

<style type="text/css">

    .s1{

        width: 100px;

        height: 100px;

        background-color: pink;

    }

    .s2{

        width: 50px;

        height: 50px;

        background-color: green;

    }

</style>

</head>

<body style="margin:1px;">

    <div id="div001">div001</div>

    <div id='div002'>div002</div>

    <div id='div003' class='div003'>div003</div>

    <div id="container" style="background-color:silver; width:100px; height:100px; overflow:auto;">

        <p style="background-color:red;" mce_style="background-color:red;">

        这里是文本 这里是文本 这里是文本 这里是文本 这里是文本

        </p>

    </div>

    <div>

        <button id="btn001">click me to get div001 css </button>

        <button id="btn002">click me to get div css </button>

        <button id="btn003">click me to use position/offset/scrollTop </button>

        <button id="btn004">click me to set p scrollTop </button>

    </div>

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

    <script type="text/javascript" src="b/js/bootstrap.js"></script>

    <script type="text/javascript" src="js/index037.js"></script>

</body>

</html>
$(function() {

    $('#btn001').click(btn001Click);

    $('#btn002').click(btn002Click);

    $('#btn003').click(btn003Click);

    $('#btn004').click(btn004Click);

    console.log('load:  ' + new Date());

    setInterval("msg()", 60000);

});

function msg() {

    console.log('msg:  ' + new Date());

}

function btn001Click() {

    // 必须有参数，没有参数会报错：Uncaught TypeError: Cannot read property 'replace' of undefined

    // var obj01=$('#btn001').css();

    // console.log(obj01);

    // 返回一个字符串

    var obj02 = $('#btn001').css('color');

    console.log(obj02);

    // 返回一个对象,abc对应的值为undefined

    var obj03 = $('#btn001').css([ 'color', 'background', 'abc' ]);

    console.log(obj03);

    var obj031 = $('#div001').css('background', 'red');

    console.log(obj031);

    // 因为可以连缀写下去，所以返回的是div001元素的jQuery对象；

    var obj04 = $('#div001').css('width');

    console.log(obj04);

    $('#div001').css('height', function(i, v) {

        // 这里面的i是0；

        console.log(i);

        console.log(v);

        return parseFloat(v) * 1.2;

    });

}

function btn002Click() {

    // 会进行自己的遍历，其实所有的jQuery对象都是数组，所以就可以统一处理了；

    var obj01 = $('div').css('background', 'red');

    console.log(obj01);

    $('div').css('height', function(i, v) {

        // 这里面的i就会变化；会把所有的div元素遍历一遍；

        console.log(i);

        console.log(v);

        return parseFloat(v) * 1.2;

    });

}

function btn003Click() {

    // 相对父元素位置，只对可见元素有效；

    var obj01 = $('#div001').position();

    console.log(obj01);

    // 相对当前视口的位置，只对可见元素有效；

    var obj02 = $('#div001').offset();

    console.log(obj02);

    // 获取顶部偏移；结果：0;对可见、不可见元素都是有效的；

    var obj03 = $('#div001').scrollTop();

    console.log(obj03);

    // 进行设置，那就会返回div001的jQuery对象；设置好像不生效呀；

    var obj04 = $('#div001').scrollTop(200);

    console.log(obj04);

    // 现在查看还是0，

    var obj05 = $('#div001').scrollTop();

    console.log(obj05);

}

function btn004Click(){

    // 这个貌似无效；

    var obj01=$('p').scrollTop(20);

    console.log(obj01);

    // 这个可以进行位置的偏移；偏移之后，其scrollTop,scrollLeft还是不变；

    var obj02=obj01.offset({top:81});

    console.log(obj02);

}

jQuery css,position,offset,scrollTop,scrollLeft用法的更多相关文章

  1. 一句话解释jquery中offset、pageX, pageY、position、scrollTop, scrollLeft的区别

    offset   元素相对文档的偏移 pageX, pageY 事件(鼠标)相对文档的偏移 注意:文档是指document, 而不是当前窗口,是包含了滚动位置的,即滚动条的位置对这些值是不产生影响的 ...

  2. jQuery CSS 操作 - offset() 方法

    今天在一个页面需要知道jquery版本号,来决定使用什么样的方法,有以下方式可以获取到 $.fn.jquery $.prototype.jquery 这两种方式都可以获取到jquery的版本号 --- ...

  3. jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position

    定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...

  4. offset() position() scrollTop() scrollLeft()

    (1)offset:获取当前元素相对于文档的高度.只对可见元素有效. 不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移 (2) position:获取元素相对于最近的一 ...

  5. jQuery方法position()与offset()区别

    参考别人写得比较明白的,红色部分为重点吧: 使用jQuery获取元素位置时,我们会使用position()或offset()方法,两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点 ...

  6. jquery 获取css position的值

      jquery 获取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示 <div id="aa&q ...

  7. css3的transform变换scale和translate等影响jQuery的position().top和offset().top

    css3的transform变换scale和translate等影响jQuery的position().top和offset().top

  8. jQuery css()与class()的用法

    一.css()用法:   1.设置css // css(name, value) // 修改单个样式 // name:样式名 value:样式值 $("li") .css(&quo ...

  9. jQuery CSS 的操作函数

    jQuery CSS 操作函数 下面列出的这些方法设置或返回元素的 CSS 相关属性. CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. o ...

随机推荐

  1. mysql安装及使用语句

    http://www.mysql.com/downloads/ ubuntu安装sqlite http://www.cnblogs.com/zhuyp1015/p/3561470.html http: ...

  2. rsa or dsa?

    http://www.linuxquestions.org/questions/linux-security-4/which-is-better-rsa-or-dsa-public-key-12593 ...

  3. [算法] kmp实现

    字符串查找是经典场景,也是面试中最常见的一道题. 说来惭愧,毕业3年了,才明白了kmp算法的实现,以前一直以为这类算法是基础,工作中中不会碰到[也的确没有碰到过...] 但是,对这些基本算法结构的理解 ...

  4. The 2014 ACMICPC Asia Regional Xian

    2题继续遗憾收场,每次都是只差最后一步.这一场却是之前那么多场中感觉距离奖牌最近的时候.好好总结一下经验教训,复盘之后好好准备下一场北京的最后一战吧. 一开始的状态非常不错,10分钟跟榜完成1A,第二 ...

  5. Apriori算法第二篇----详细分析和代码实现

    1 Apriori介绍 Apriori算法使用频繁项集的先验知识,使用一种称作逐层搜索的迭代方法,k项集用于探索(k+1)项集.首先,通过扫描事务(交易)记录,找出所有的频繁1项集,该集合记做L1,然 ...

  6. 搭建firefly服务端遇到的问题

    1 pylinter pylinter could not automatically determined the path to "lint.py" 这个错误通过安装pylin ...

  7. python--字符串操作（删除，替换）

    示例: 替换字符串开头和结尾处的空格 1. [代码][Python]代码     跳至 [1] [全屏预览] view source print? 01 # -*- coding: utf-8 -*- ...

  8. ie6,ie7兼容性总结

    摘自: http://www.cnblogs.com/li0803/archive/2009/08/22/1552094.html 其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致 ...

  9. vmware克隆Centos6.7虚拟机网卡无法启动问题

    快速处理办法: cat /etc/sysconfig/network-scripts/ifcfg-eth0 sed -i '/UUID/d' /etc/sysconfig/network-script ...

  10. BMP085气压传感器驱动

    BMP085是新一代的小封装气压传感器,主要用于气压温度检测,在四轴飞行器上可以用作定高检测,该传感器属于IIC总线接口,依然沿用标准IIC驱动程序 使用该传感器需要注意的是我们不能直接读出转换好的二 ...