CSS
位置
尺寸

CSS

css(name|pro|[,val|fn]) ：访问匹配元素的样式属性

示例：

1 // 获取color样式属性的值
2 $(p).css("color");
3 // 将所有段落的字体颜色设为红色并且背景为蓝色
4 $("p").css({ color: "#ff0011", background: "blue" });

位置

offset([coordinates]) ：获取匹配元素在当前视口的相对偏移，返回的对象包含两个整型属性：top 和 left
position() ：获取匹配元素相对父元素的偏移，返回的对象包含两个整型属性：top 和 left
scrollTop([val]) ：获取匹配元素相对滚动条顶部的偏移
scrollLeft([val]) ：获取匹配元素相对滚动条左侧的偏移

示例：

 1 // HTML代码
 2 <p>Hello</p><p>2nd Paragraph</p>
 3
 4 // 获取最后一个p的偏移(left:0 top:35)
 5 var offset = $("p:last").offset();
 6 alert(offset.left+" | "offset.top);
 7
 8 // 设置p的偏移
 9 $("p:last").offset({ top: 10, left: 30 });
10
11 // 获取最后一个p的位置(left:15 top:15)
12 var position = $("p:last").position();
13 alert(position.left+" | "+position.top);

 1 <!DOCTYPE html>
 2 <head>
 3   <meta charset="utf-8">
 4   <title>Selecter</title>
 5
 6   <script src="js/jquery-1.8.0.min.js" charset="utf-8"></script>
 7   <style media="screen">
 8     .box{ 9       width:3700px;
10       height:6000px;
11     }
12     .p1{13       position: fixed;
14       left: 30px;
15       top:30px;
16     }
17   </style>
18 </head>
19 <body>
20   <div class="box">
21     <p class="p1">text</p>
22   </div>
23
24   <script type="text/javascript">
25     $(window).scroll(function(){
26       $(".p1").text($(window).scrollTop());
27     });
28   </script>
29 </body>

View Code

尺寸

height([val|fn]) ：获取当前元素的高度值（px）
width([val|fn]) ：获取当前元素的宽度值（px）
innerHeight() ：获取当前元素的内部高度，不包括边框
innerWidth() ：获取当前元素的内部宽度，不包括边框
outerHeight([options]) ：获取当前元素的外部高度，包括边框，如果options为true则计算边距在内
outerWidth([options]) ：获取当前元素的外部宽度，包括边框，如果options为true则计算边距在内

示例：

 1  // 获取p的高度
 2 $("p").height();
 3
 4 // 设置p的高度
 5 $("p").height(20);
 6
 7 // 获取p的内部高度
 8 $("p").innerHeight();
 9
10 // 获取p的外部高度
11 $("p").outerHeight(true);

转载于:https://www.cnblogs.com/agmj117/p/7692210.html

005-JQuery之CSS相关推荐

使用jQuery的.css()和.attr()方法设置元素left属性的注意点
今天在使用jQuery方法".css()"设置"ajax-loader.gif"的位置时出了点小状况,关键代码如下(为了简化,这里假定要给"ajax- ...
38动感菜单 38 jQuery And CSS Drop Down Multi Level Menu Solutions
参看: http://www.1stwebdesigner.com/freebies/38-jquery-and-css-drop-down-multi-level-menu-solutions/ 3 ...
jQuery操作CSS常见问题
1.jquery操作css !important无效解决: 这种写法:$('#oDiv').css({"width":"100px", "color ...
jquery访问css类,jQuery - 获取并设置 CSS 类
2017-09-16 摘抄自W3school-jQuery - 获取并设置 CSS 类希望帮助自己系统地打好基础,也能在做笔记的同时添加一些自己额外的收获. 通过 jQuery,可以很容易地对 CS ...
jquery和css的区别是什么？
jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是" ...
【jQuery学习】—jQuery操作CSS和表格
[jQuery学习]-jQuery操作CSS和表格一.jQuery操作CSS 二.jQuery操作表格
jquery、css 的选择器(逗号/空格/英文句号/大于号/加号/波浪号)
jQuery.CSS常用选择器符号描述示例说明紧接无符号相当于"并且"关系 input.k-textbox{ ... } 选出input并且包含k-textbox ...
jQuery添加css样式/动画效果
目录 jQuery操作css: css属性: 动画: 停止动画: 尺寸: 父/子/兄弟元素: 父元素: 子元素: 兄弟元素: 过滤: 遍历: jQuery操作css: addClass() - 向被选 ...
如何使用jquery修改css中带有!important的样式属性
<div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{width: ...
jQuery和CSS制作霓虹灯文字效果
原文:jQuery和CSS制作霓虹灯文字效果源代码下载地址:http://www.zuidaima.com/share/1607121521200128.htm

005-JQuery之CSS

CSS

位置

尺寸

005-JQuery之CSS相关推荐

最新文章

热门文章