jquery-8 jquery如何处理css样式
jquery-8 jquery如何处理css样式
一、总结
一句话总结：
1、如何获取网页的三个高？
1)可视区域的高
$(window).height();
2)文档总高度
$(document).height();
3)滚动的高
$(window).scrollTop();
2、标签的三种类型的宽高是哪三种？
height();
width();
innerHeight();
innerWidth();
outerHeight();
outerWidth();
3、position()和offset()的区别是什么？
position是相对父亲的位置
offset是相对窗口左上角的位置
二、jquery如何处理css样式
1、相关知识
CSS处理:
1.CSS样式
css();
css({});
2.位置
offset();
position();
scrollTop(val);
3.尺寸
height();
width();
innerHeight();
innerWidth();
outerHeight();
outerWidth();
4.获取三个高
1)可视区域的高
$(window).height();
2)文档总高度
$(document).height();
3)滚动的高
$(window).scrollTop();
2、代码
position定位
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
} .main{
width:1000px;
height:500px;
position: absolute;
left:50%;
top:50%;
margin-left:-500px;
margin-top:-250px;
box-shadow:0px 0px 5px 5px #000;
}
.shop{
width:200px;
height:200px;
overflow: hidden;
box-shadow:0px 0px 5px 5px #ccc;
float: left;
margin-left:40px;
margin-top:10px;
} .img{
position: absolute;
border:10px solid #ccc;
border-radius:200px;
overflow: hidden;
width:200px;
height:200px;
display: none;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class='main'>
<div class='img'>
<img src="a.png" alt="">
</div>
<div class='shop'>
<img src="b.jpg" width='100%'>
</div>
<div class='shop'>
<img src="b.jpg" width='100%'>
</div>
<div class='shop'>
<img src="b.jpg" width='100%'>
</div>
<div class='shop'>
<img src="b.jpg" width='100%'>
</div>
</div>
</body>
<script>
$('.shop').mouseenter(function(){
x=$(this).position().left+40;
y=$(this).position().top+10+200; $('.img').show().css({'top':y+'px','left':x+'px'});
});
</script>
</html>
获取屏幕滚动的高
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<h1>0000001</h1>
<h1>0000002</h1>
<h1>0000003</h1>
<h1>0000004</h1>
<h1>0000005</h1>
<h1>0000006</h1>
<h1>0000007</h1>
<h1>0000008</h1>
<h1>0000009</h1>
<h1>0000010</h1>
<h1>0000011</h1>
<h1>0000012</h1>
<h1>0000013</h1>
<h1>0000014</h1>
<h1>0000015</h1>
<h1>0000016</h1>
<h1>0000017</h1>
<h1>0000018</h1>
<h1>0000019</h1>
<h1>0000020</h1>
<h1>0000021</h1>
<h1>0000022</h1>
<h1>0000023</h1>
<h1>0000024</h1>
<h1>0000025</h1>
<h1>0000026</h1>
<h1>0000027</h1>
<h1>0000028</h1>
<h1>0000029</h1>
<h1>0000030</h1>
<h1>0000031</h1>
<h1>0000032</h1>
<h1>0000033</h1>
<h1>0000034</h1>
<h1>0000035</h1>
<h1>0000036</h1>
<h1>0000037</h1>
<h1>0000038</h1>
<h1>0000039</h1>
<h1>0000040</h1>
<h1>0000041</h1>
<h1>0000042</h1>
<h1>0000043</h1>
<h1>0000044</h1>
<h1>0000045</h1>
<h1>0000046</h1>
<h1>0000047</h1>
<h1>0000048</h1>
<h1>0000049</h1>
<h1>0000050</h1>
<h1>0000051</h1>
<h1>0000052</h1>
<h1>0000053</h1>
<h1>0000054</h1>
<h1>0000055</h1>
<h1>0000056</h1>
<h1>0000057</h1>
<h1>0000058</h1>
<h1>0000059</h1>
<h1>0000060</h1>
<h1>0000061</h1>
<h1>0000062</h1>
<h1>0000063</h1>
<h1>0000064</h1>
<h1>0000065</h1>
<h1>0000066</h1>
<h1>0000067</h1>
<h1>0000068</h1>
<h1>0000069</h1>
<h1>0000070</h1>
<h1>0000071</h1>
<h1>0000072</h1>
<h1>0000073</h1>
<h1>0000074</h1>
<h1>0000075</h1>
<h1>0000076</h1>
<h1>0000077</h1>
<h1>0000078</h1>
<h1>0000079</h1>
<h1>0000080</h1>
<h1>0000081</h1>
<h1>0000082</h1>
<h1>0000083</h1>
<h1>0000084</h1>
<h1>0000085</h1>
<h1>0000086</h1>
<h1>0000087</h1>
<h1>0000088</h1>
<h1>0000089</h1>
<h1>0000090</h1>
<h1>0000091</h1>
<h1>0000092</h1>
<h1>0000093</h1>
<h1>0000094</h1>
<h1>0000095</h1>
<h1>0000096</h1>
<h1>0000097</h1>
<h1>0000098</h1>
<h1>0000099</h1>
<h1>0000100</h1>
</body>
<script>
$(window).scroll(function(){
h=$(window).scrollTop();
document.title=h;
});
</script>
</html>
jquery-8 jquery如何处理css样式的更多相关文章
- jQuery所支持的css样式
jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- 转：jquery操作元素的css样式（获取、修改等等）
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- 使用jquery操作元素的css样式（获取、修改等等）
//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr(&qu ...
- jquery修改带!important的css样式
由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方 ...
- jquery改变多个css样式
<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax ...
- jquery validate的漂亮css样式验证
自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- jquery设置多个css样式
$(selector).css({property:value, property:value, ...}) 实例: $("p").css({ "color": ...
- 用jQuery设置多个css样式
$("#show_one").css({"position":"fixed","top":"0px" ...
随机推荐
- Oracle 11gR2光钎链路切换crs服务发生crash
Oracle 11gR2光钎链路切换crs服务发生crash 背景: 我们将Oracle 11gR2(11.2.0.4)在RedHat EnterPrise 5.8上通过RDAC完毕的多路径链路冗余. ...
- Fragment-按返回键程序退出
今天在做fragment的时候,发现一个问题,当我的界面停留在fragment的时候,按物理返回键,这时候会推出整个应用.这当然不是我们期望的,我们期望按返回键以后,应用界面返回添加fragment之 ...
- Android开发经验之获取画在画布上的字符串长度、宽度（所占像素宽度)
Android中获取字符串长度.宽度(所占像素宽度) 计算出当前绘制出来的字符串有多宽,可以这么来! 方法1: Paint paint = new Paint(); Rect rect = new R ...
- mysql 批量删除数据
批量删除2000w数据 使用delete from table太慢 //DELIMITER DROP PROCEDURE if EXISTS deleteManyTable; create PROCE ...
- [NOI2008]假面舞会（DFS）
Description 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会.今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一 个自己喜欢的面具.每个面具都有一个编号,主办 ...
- 淘宝分类导航条；纯css实现固定导航栏
效果例如以下: 页面例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- 10.Maven依赖排除 禁止依赖传递 取消依赖的方法
转自:https://www.cnblogs.com/duanxz/p/6084494.html 大家都知道Maven的优点是依赖管理,特别是前期使用ANT的开发者都有很多感触.最近要开发一个java ...
- 7. Spring Boot 启动加载数据 CommandLineRunner
转自:https://blog.csdn.net/catoop/article/details/50501710
- amazeui-datatables（登录注册界面用到）
amazeui-datatables(登录注册界面用到) 一.总结 amazeui-datatables:DataTables 插件 Amaze UI 集成,只修改了样式和默认显示语言,其他参数同官方 ...
- C# SocketAsyncEventArgs类
Namespace:System.Net.Sockets Assemblies:System.Net.Sockets.dll, System.dll, netstandard.dll (Represe ...