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定位
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
jquery-8 jquery如何处理css样式相关推荐
- jquery怎么动态修改css样式
jquery动态修改css样式的方法:1.通过css方法动态修改css样式:2.给指定的html元素定一个CSS样式:3.查看元素的css样式:4.隐藏与显示p或指定的其他html元素. jquery ...
- 用jQuery设置元素的css样式
什么是jQuery ,jQuery 是能用少量的代码写出JavaScript的效果. 学习jQuery 要有一定的JavaScript.CSS.HTML的基础: jQuery 库位于一个 JavaSc ...
- jquery 判断控件css样式,jQuery获取并设置CSS类
jQuery获取并设置CSS类 通过 jQuery,可以很容易地对 CSS 元素进行操作. jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: • add ...
- jQuery 学习-样式篇（八）：jQuery 设置元素的 CSS 样式
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- jQuery修改!important的css样式jQuery修改css未生效
当我们使用jQuery修改带有!important的css样式或者jQuerycss样式未生效可尝试以下解决办法 1.解决办法 原有代码: <!DOCTYPE html> <html ...
- jquery html 清除样式,jquery怎么移除css样式
jquery移除css样式的方法:1.通过使用"removeClass()"方法去除css样式:2.通过使用"attr()"方法或"css()&quo ...
- jQuery如何移除css样式？
解决办法 1.移除全部样式使用removeattr("style"): 2.移除单个样式使用css("属性",""): 例如: <sc ...
- 使用jQuery改变元素的CSS样式
一.获取并设置css类 操作css的 方法有以下几种: addClass() -向被选元素添加一个或多个类. removeClass() -向被选元素添加一个或多个类. toggleClass() - ...
- jquery ajax php中 css样式不显示,Chrome浏览器在Ajax同步调用之前不会显示Jquery的动态css Propery更改...
我有如下因素HTML节点: 上的click事件会触发聊天对象的方法 this.addUser = function(trigger_node, id, is_silent, session, show ...
- 用jQuery设置多个css样式
$("#show_one").css({"position":"fixed","top":"0px" ...
最新文章
- hibernate3.4+struts1.3分页封装，有兴趣者可以看一下
- ajax请求php返回的数据是整个页面的html,Ajax出错并返回整个页面html的问题
- golang 泛型_Golang 1.x版本泛型编程
- matlab 参数识别,[转载]自编最小二乘法的Matlab参数辨识程序（含实例）
- Java成神之路——JVM垃圾回收概览
- 2017模拟计算机考试试题,2017年计算机考试四级模拟试题及答案
- 举例 微积分 拉格朗日方程_《微积分教程》数学笔记目录
- android-support-v7-appcompat的配置使用
- 5G手机什么牌子的便宜一点
- 仿真器如何工作以及如何编写？ [关闭]
- 网络工程师经常会面对服务器性能,下半网络工程师试卷(下午).doc
- 震惊！PC端QQ也能防撤回？
- vue项目引用美图秀秀图片编辑器
- 清华刘知远：好的研究想法从哪里来？
- 易基因项目文章 | 90天见刊，易基因m6A RNA甲基化(MeRIP)+转录组组学研究
- java线程池newfi_java线程池
- 视频教程-PHP基础项目实战/过程化开发-PHP
- 微信王者服务器怎么删掉,王者荣耀怎么删除微信好友 又快又好
- 【浅墨Unity3D Shader编程】之中的一个 夏威夷篇：游戏场景的创建 amp; 第一个Shader的书写...
- 敏捷Scrum指南一：Scrum起源