CSS方法
jQuery不但提供了CSS的核心操作方法，比如.css()、.addClass()等。还封装了一些特殊功能的CSS操作方法，我们分别来了解一下。
width()方法
| 方法名 | 描述 |
| width() | 获取某个元素的长度 |
| width(value) | 设置某个元素的长度 |
| width(function(index,width) {}) | 通过匿名函数设置某个元素的长度 |
html代码(部分)如下：
<div style="background: #eee; width: 800px;">
<strong>www.ycku.com</strong>
</div>
jQuery代码如下：
通过typeof可以看到变量的具体数据类型是什么。
alert(typeof $("div").css("width")); //string
alert(typeof parseInt($("div").css("width"))); //number
alert(typeof $("div").width()); //获取元素的长度，返回的类型为number
alert($("div").width()); //800
alert($(window).width()); //1366
alert($(document).width()); //1366
$("div").width(500); //设置元素长度，直接传数值，默认加px
$("div").width("500px"); //同上
$("div").width("500pt"); //同上，设置了pt单位
$("div").width(function(index, width) { //index是索引，width是原本值
return width - 500 + "px"; //虽然可以不加(单位)，会智能添加，但还是建议加上单位，更加清晰
});
height()方法
| 方法名 | 描述 |
| height() | 获取某个元素的高度 |
| height(value) | 设置某个元素的高度 |
| height(function(index,height) {}) | 通过匿名函数设置某个元素的高度 |
此方法与width()类似，在此不赘述。
内外边距和边框尺寸方法
| 方法名 | 描述 |
| innerWidth() | 获取元素宽度，包含内边距padding |
| innerHeight() | 获取元素高度，包含内边距padding |
| outerWidth() | 获取元素宽度，包含边框border和内边距padding |
| outerHeight() | 获取元素高度，包含border和内边距padding |
| outerWidth(true) | 同上，且包含外边距 |
| outerHeight(true) | 同上，且包含外边距 |
有html代码如下：
<div style="background: #eee; width: 200px; height: 200px; padding: 200px; border: 100px solid red; margin: 100px;">
<strong>www.ycku.com</strong>
</div>
alert($("div").width()); //不包含 200
alert($("div").innerWidth()); //包含内边距padding 600
alert($("div").outerWidth()); //包含内边距padding+边框border 800
alert($("div").outerWidth(true)); //包含内边距padding+边框border+外边距margin 1000
元素偏移方法
| 方法名 | 描述 |
| offset() | 获取某个元素相对于视口的偏移位置 |
| position() | 获取某个元素相对于父元素的偏移位置 |
| scrollTop() | 获取垂直滚动条的值 |
| scrollTop(value) | 设置垂直滚动条的值 |
| scrollLeft() | 获取水平滚动条的值 |
| scrollLeft(value) | 设置水平滚动条的值 |
html(部分代码如下)：
<div title="bbb">
<strong>www.ycku.com</strong>
</div>
jQuery代码如下：
alert($("div").offset().left); //相对于视口(我觉得是window)的偏移 8
alert($("div").offset().top); //相对于视口(我觉得是window)的偏移 8
alert($("strong").offset().top); //同上 8
再看html代码：
<div title="aaa" style="position: relative;">
<strong style="position: absolute; top: 1px;">www.ycku.com</strong>
</div>
jQuery代码如下：
alert($("div").position().top); //相对于父元素的偏移 8
alert($("strong").offset().top);//相对于视口的偏移 9
alert($("strong").position().top); //相对于父元素的偏移 1
再看html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础DOM和CSS操作</title>
<script type="text/javascript" src="jquery-1.12.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
</body>
</html>
jQuery代如下：
$(window).scrollTop(400); //设置当前滚动条的位置 alert($(window).scrollTop()); //获取当前滚动条的位置
时间： 2024-10-21 13:45:34