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 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 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 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>