【转】 jQuery学习笔记：CSS

萧又鸣 發表於 2020-10-14 10:50:00

【转】 jQuery学习笔记：CSS 
一、CSS 1、css(name) 访问第一个匹配元素的样式属性。 返回值 String 参数 name (String) : 要访问的属性名称 示例： $("p").css("color"); //取得第一个段落的color样式属性的值 2、css(properties) 把一个“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式。 返回值 jQuery 参数 properties (Map) : 要设置为样式属性的名/值对 示例：
<div class="cnblogs_code">//1 将所有段落的字体颜色设为红色并且背景为蓝色 $("p").css({ color: "#ff0011", background: "blue" }); //2 如果属性名包含 "-"的话，必须使用引号 $("p").css({ "margin-left": "10px", "background-color": "blue" }); </div>
3、css(name,value) 在所有匹配的元素中，设置一个样式属性的值。数字将自动转化为像素值 返回值 jQuery 参数 
name (value) : 属性名 value (String, Number) : 属性值 示例： $("p").css("color","red"); //将所有段落字体设为红色 二、位置 1、offset() 获取匹配元素在当前视窗口的相对偏移。返回的对象包含两个整形属性：top 和 left。 注意：此方法只对可见元素有效。 返回值 Object{top,left} 示例：
<div class="cnblogs_code">/* //获取第二段的偏移 文档片段：Hello2nd Paragraph  */ var p = $("p:last"); var offset = p.offset(); p.html("left: " + offset.left + ", top: " + offset.top); </div>
2、position() 获取匹配元素相对父元素的偏移。 返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。 返回值 Object{top,left} 示例：
<div class="cnblogs_code">/* //获取第一段的偏移  文档片段：Hello2nd Paragraph  */ var p = $("p:first"); var position = p.position(); $("p:last").html("left: " + position.left + ", top: " + position.top); </div>
3、scrollTop() 获取匹配元素相对滚动条顶部的偏移。 注意：此方法对可见和隐藏元素均有效。 返回值 Integer 示例：
<div class="cnblogs_code">/* //获取第一段相对滚动条顶部的偏移   文档片段：Hello2nd Paragraph  */ var p = $("p:first"); $("p:last").text("scrollTop:" + p.scrollTop()); </div>
4、scrollTop(val) 传递参数值时，设置滚动条顶部偏移为该值。此方法对可见和隐藏元素均有效。 返回值 jQuery 示例： $("div.demo").scrollTop(300); 5、scrollLeft() 获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。 返回值 Integer 示例：
<div class="cnblogs_code">/* //获取第一段相对滚动条左侧的偏移     文档片段：Hello2nd Paragraph  */ var p = $("p:first"); $("p:last").text("scrollLeft:" + p.scrollLeft()); </div>
6、scrollLeft(val) 传递参数值时，设置滚动条左侧偏移为该值。此方法对可见和隐藏元素均有效。 返回值 jQuery 示例： $("div.demo").scrollLeft(300); 三、尺寸 1、height() 取得第一个匹配元素当前计算的高度值（px）。在 jQuery 1.2 以后可以用来获取 window 和 document 的高 返回值 Integer 示例：
<div class="cnblogs_code">/* //获取第一段的高      文档片段：Hello2nd Paragraph  */ alert($("p").height()); //获取文档的高  alert($(document).height()); </div>
2、height(val) 为每个匹配的元素设置CSS高度(hidth)属性的值。如果没有明确指定单位（如：em或%），使用px。如果没有明确指定单位（如：em或%），使用px。 返回值 jQuery 参数 val (String, Number) : 设定CSS中 'height' 的值 示例：
<div class="cnblogs_code">/* //把所有段落的高设为 20   文档片段：Hello2nd Paragraph  */ $("p").height(20);  alert($("p").height()); </div>
3、width() 取得第一个匹配元素当前计算的宽度值（px）。在 jQuery 1.2 以后可以用来获取 window 和 document 的宽 返回值 Integer 示例：0
<div class="cnblogs_code">/* //获取第一段的宽  文档片段：Hello2nd Paragraph  */ alert($("p").width());</div>
4、width(val) 为每个匹配的元素设置CSS宽度(width)属性的值。如果没有明确指定单位（如：em或%），使用px。 返回值 jQuery 参数 val (String, Number) : 设定 CSS 'width' 的属性值 示例：
<div class="cnblogs_code">/* //将所有段落的宽设为 20  文档片段：Hello2nd Paragraph  */ $("p").width(20); alert($("p").width());</div>
5、innerHeight() 获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。 返回值 Integer 示例：
<div class="cnblogs_code">/* //获取第一段落内部区域高度  文档片段：Hello2nd Paragraph  */ var p = $("p:first"); $("p:last").text("innerHeight:" + p.innerHeight()); </div>
7、innerWidth() 获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。 返回值 Integer 示例：
<div class="cnblogs_code">/* //获取第一段落内部区域宽度 文档片段：Hello2nd Paragraph  */ var p = $("p:first"); $("p:last").text("innerWidth:" + p.innerWidth());  </div>
7、outerHeight(options) 获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。 返回值 Integer 参数 options(Boolean) : (false)  设置为 true 时，计算边距在内。 示例：
<div class="cnblogs_code">/* //获取第一段落外部高度 文档片段：Hello2nd Paragraph  */ var p = $("p:first"); $("p:last").text("outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true)); </div>
8、outerHeight(options) 获取第一个匹配元素外部宽度（默认包括补白和边框）。此方法对可见和隐藏元素均有效。 返回值 Integer 参数 options(Boolean) : (false)   设置为 true 时，计算边距在内。 示例： 
<div class="cnblogs_code">/* //获取第一段落外部宽度 文档片段：Hello2nd Paragraph  */ var p = $("p:first"); $("p:last").text("outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true)); </div>
  
来源：https://www.cnblogs.com/Javastudy-note/p/13813520.html

頁: [1]

琼殿技术论坛's Archiver

【转】 jQuery学习笔记：CSS