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定位
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>index</title>
6 <style>
7 *{
8 font-family: 微软雅黑;
9 }
10
11 .main{
12 width:1000px;
13 height:500px;
14 position: absolute;
15 left:50%;
16 top:50%;
17 margin-left:-500px;
18 margin-top:-250px;
19 box-shadow:0px 0px 5px 5px #000;
20 }
21 .shop{
22 width:200px;
23 height:200px;
24 overflow: hidden;
25 box-shadow:0px 0px 5px 5px #ccc;
26 float: left;
27 margin-left:40px;
28 margin-top:10px;
29 }
30
31 .img{
32 position: absolute;
33 border:10px solid #ccc;
34 border-radius:200px;
35 overflow: hidden;
36 width:200px;
37 height:200px;
38 display: none;
39 }
40 </style>
41 <script src="jquery.js"></script>
42 </head>
43 <body>
44 <div class='main'>
45 <div class='img'>
46 <img src="a.png" alt="">
47 </div>
48 <div class='shop'>
49 <img src="b.jpg" width='100%'>
50 </div>
51 <div class='shop'>
52 <img src="b.jpg" width='100%'>
53 </div>
54 <div class='shop'>
55 <img src="b.jpg" width='100%'>
56 </div>
57 <div class='shop'>
58 <img src="b.jpg" width='100%'>
59 </div>
60 </div>
61 </body>
62 <script>
63 $('.shop').mouseenter(function(){
64 x=$(this).position().left+40;
65 y=$(this).position().top+10+200;
66
67 $('.img').show().css({'top':y+'px','left':x+'px'});
68 });
69 </script>
70 </html>
获取屏幕滚动的高
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>index</title>
6 <style>
7 *{
8 font-family: 微软雅黑;
9 }
10 </style>
11 <script src="jquery.js"></script>
12 </head>
13 <body>
14 <h1>0000001</h1>
15 <h1>0000002</h1>
16 <h1>0000003</h1>
17 <h1>0000004</h1>
18 <h1>0000005</h1>
19 <h1>0000006</h1>
20 <h1>0000007</h1>
21 <h1>0000008</h1>
22 <h1>0000009</h1>
23 <h1>0000010</h1>
24 <h1>0000011</h1>
25 <h1>0000012</h1>
26 <h1>0000013</h1>
27 <h1>0000014</h1>
28 <h1>0000015</h1>
29 <h1>0000016</h1>
30 <h1>0000017</h1>
31 <h1>0000018</h1>
32 <h1>0000019</h1>
33 <h1>0000020</h1>
34 <h1>0000021</h1>
35 <h1>0000022</h1>
36 <h1>0000023</h1>
37 <h1>0000024</h1>
38 <h1>0000025</h1>
39 <h1>0000026</h1>
40 <h1>0000027</h1>
41 <h1>0000028</h1>
42 <h1>0000029</h1>
43 <h1>0000030</h1>
44 <h1>0000031</h1>
45 <h1>0000032</h1>
46 <h1>0000033</h1>
47 <h1>0000034</h1>
48 <h1>0000035</h1>
49 <h1>0000036</h1>
50 <h1>0000037</h1>
51 <h1>0000038</h1>
52 <h1>0000039</h1>
53 <h1>0000040</h1>
54 <h1>0000041</h1>
55 <h1>0000042</h1>
56 <h1>0000043</h1>
57 <h1>0000044</h1>
58 <h1>0000045</h1>
59 <h1>0000046</h1>
60 <h1>0000047</h1>
61 <h1>0000048</h1>
62 <h1>0000049</h1>
63 <h1>0000050</h1>
64 <h1>0000051</h1>
65 <h1>0000052</h1>
66 <h1>0000053</h1>
67 <h1>0000054</h1>
68 <h1>0000055</h1>
69 <h1>0000056</h1>
70 <h1>0000057</h1>
71 <h1>0000058</h1>
72 <h1>0000059</h1>
73 <h1>0000060</h1>
74 <h1>0000061</h1>
75 <h1>0000062</h1>
76 <h1>0000063</h1>
77 <h1>0000064</h1>
78 <h1>0000065</h1>
79 <h1>0000066</h1>
80 <h1>0000067</h1>
81 <h1>0000068</h1>
82 <h1>0000069</h1>
83 <h1>0000070</h1>
84 <h1>0000071</h1>
85 <h1>0000072</h1>
86 <h1>0000073</h1>
87 <h1>0000074</h1>
88 <h1>0000075</h1>
89 <h1>0000076</h1>
90 <h1>0000077</h1>
91 <h1>0000078</h1>
92 <h1>0000079</h1>
93 <h1>0000080</h1>
94 <h1>0000081</h1>
95 <h1>0000082</h1>
96 <h1>0000083</h1>
97 <h1>0000084</h1>
98 <h1>0000085</h1>
99 <h1>0000086</h1>
100 <h1>0000087</h1>
101 <h1>0000088</h1>
102 <h1>0000089</h1>
103 <h1>0000090</h1>
104 <h1>0000091</h1>
105 <h1>0000092</h1>
106 <h1>0000093</h1>
107 <h1>0000094</h1>
108 <h1>0000095</h1>
109 <h1>0000096</h1>
110 <h1>0000097</h1>
111 <h1>0000098</h1>
112 <h1>0000099</h1>
113 <h1>0000100</h1>
114 </body>
115 <script>
116 $(window).scroll(function(){
117 h=$(window).scrollTop();
118 document.title=h;
119 });
120 </script>
121 </html>
来源：https://www.cnblogs.com/Renyi-Fan/p/9227219.html