jQuery css,position,offset,scrollTop,scrollLeft用法
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用法的更多相关文章
- 一句话解释jquery中offset、pageX, pageY、position、scrollTop, scrollLeft的区别
offset 元素相对文档的偏移 pageX, pageY 事件(鼠标)相对文档的偏移 注意:文档是指document, 而不是当前窗口,是包含了滚动位置的,即滚动条的位置对这些值是不产生影响的 ...
- jQuery CSS 操作 - offset() 方法
今天在一个页面需要知道jquery版本号,来决定使用什么样的方法,有以下方式可以获取到 $.fn.jquery $.prototype.jquery 这两种方式都可以获取到jquery的版本号 --- ...
- jQuery offset，position，offsetParent，scrollLeft，scrollTop html控件定位 css position
定位应用:点击一个按钮,然后在按钮的右边弹出一个提示框 1,提示框相对于屏幕进行定位,那么使用offset来取得当前按钮相对于body的top和left,然后通过$('body').prepend(t ...
- offset() position() scrollTop() scrollLeft()
(1)offset:获取当前元素相对于文档的高度.只对可见元素有效. 不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前视口的偏移 (2) position:获取元素相对于最近的一 ...
- jQuery方法position()与offset()区别
参考别人写得比较明白的,红色部分为重点吧: 使用jQuery获取元素位置时,我们会使用position()或offset()方法,两个方法都返回一个包含两个属性的对象-左边距和上边距,它们两个的不同点 ...
- jquery 获取css position的值
jquery 获取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示 <div id="aa&q ...
- css3的transform变换scale和translate等影响jQuery的position().top和offset().top
css3的transform变换scale和translate等影响jQuery的position().top和offset().top
- jQuery css()与class()的用法
一.css()用法: 1.设置css // css(name, value) // 修改单个样式 // name:样式名 value:样式值 $("li") .css(&quo ...
- jQuery CSS 的操作函数
jQuery CSS 操作函数 下面列出的这些方法设置或返回元素的 CSS 相关属性. CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. o ...
随机推荐
- hibetnateTemplate常用方法
一.hibetnateTemplate常用方法 1.delete(Object entity) 删除指定的持久化实例在程序中一般先用 Assert.notNull和 Assert.isTrue断 ...
- ecstore中kvstore之memcached
memcached的安装 详细见 http://blog.csdn.net/motian06/article/details/17558831 memcached扩展的安装 详细见 http://bl ...
- php 系列
1.给 跑在windows 环境下的php, 安装redis 拓展.(installing Redis & Redis extension in PHP on XAMPP on windows ...
- jQuery HighchartsTableHTML表格转Highcharts图表插件
版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highc ...
- PAT (Advanced Level) 1018. Public Bike Management (30)
先找出可能在最短路上的边,图变成了一个DAG,然后在新图上DFS求答案就可以了. #include<iostream> #include<cstring> #include&l ...
- CodeForces 610B Vika and Squares
#include<cstdio> #include<cstring> #include<cmath> #include<algorithm> using ...
- Linux 最简单的驱动程序hello world
图片驱动位置:kernel3-10/driver/misc/mediatek/imgsensor/src/mt8127/kd_sensorlist.c 例子:kernel-3.10/driver/mi ...
- (中等) HDU 4979 A simple math problem. , DLX+重复覆盖+打表。
Description Dragon loves lottery, he will try his luck every week. One day, the lottery company brin ...
- HDU 5620 KK's Steel
想了一下发现是斐波那契数列.....水题 #include <stdio.h> #include <algorithm> #include <string.h> # ...
- 3505: [Cqoi2014]数三角形
3505: [Cqoi2014]数三角形 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1324 Solved: 807[Submit][Statu ...