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; 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); }