JQuery（七）

末蓝、 2022-05-24 01:00 144阅读 0赞

**(学习留存，如有侵权，请告知，立刻删除！)**

**jQuery CSS 操作函数**

下面列出的这些方法设置或返回元素的 CSS 相关属性。

<table> 
 <tbody> 
  <tr> 
   <th><span style="color:#000000;">CSS 属性</span></th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>css()</td> 
   <td>设置或返回匹配元素的样式属性。</td> 
  </tr> 
  <tr> 
   <td>height()</td> 
   <td>设置或返回匹配元素的高度。</td> 
  </tr> 
  <tr> 
   <td>offset()</td> 
   <td>返回第一个匹配元素相对于文档的位置。</td> 
  </tr> 
  <tr> 
   <td>offsetParent()</td> 
   <td>返回最近的定位祖先元素。</td> 
  </tr> 
  <tr> 
   <td>position()</td> 
   <td>返回第一个匹配元素相对于父元素的位置。</td> 
  </tr> 
  <tr> 
   <td>scrollLeft()</td> 
   <td>设置或返回匹配元素相对滚动条左侧的偏移。</td> 
  </tr> 
  <tr> 
   <td>scrollTop()</td> 
   <td>设置或返回匹配元素相对滚动条顶部的偏移。</td> 
  </tr> 
  <tr> 
   <td>width()</td> 
   <td>设置或返回匹配元素的宽度。</td> 
  </tr> 
 </tbody> 
</table>

（1）css() 方法：  
css() 方法返回或设置匹配的元素的一个或多个样式属性。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").css("color","red");  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button type="button">改变段落的颜色</button>  
</body>  
  
返回 CSS 属性值  
返回第一个匹配元素的 CSS 属性值。  
注释：当用于返回一个值时，不支持简写的 CSS 属性（比如 "background" 和 "border"）。  
语法：$(selector).css(name)  
name：必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性。比如 "color"。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    alert($("p").css("color"));  
  \});  
\});  
</script>  
<body>  
<p style="color:red">This is a paragraph.</p>  
<button type="button">返回段落的颜色</button>  
</body>  
  
设置 CSS 属性  
设置所有匹配元素的指定 CSS 属性。  
语法：$(selector).css(name,value)  
name：必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。  
value：可选。规定 CSS 属性的值。该参数可包含任何 CSS 属性值，比如 "red"。  
如果设置了空字符串值，则从元素中删除指定属性。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").css("color","red");  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button type="button">改变段落的颜色</button>  
</body>  
  
使用函数来设置 CSS 属性  
设置所有匹配的元素中样式属性的值。  
此函数返回要设置的属性值。接受两个参数，index 为元素在对象集合中的索引位置，value 是原先的属性值。  
语法：$(selector).css(name,function(index,value))  
name：必需。规定 CSS 属性的名称。该参数可包含任何 CSS 属性，比如 "color"。  
function(index,value)：规定返回 CSS 属性新值的函数。  
    index - 可选。接受选择器的 index 位置  
    oldvalue - 可选。接受 CSS 属性的当前值。  
将所有段落的颜色设为红色：  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").css("color",function()\{  
    return "red";  
    \});  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button>设置所有 p 元素的 color 属性</button>  
</body>  
  
逐渐增加 div 的宽度：  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("div").click(function() \{  
    $(this).css(  
      "width", function(index, value) \{return parseFloat(value) \* 1.2;\}  
    );  
  \});  
\});  
</script>  
<style>  
div \{width:100px; height:50px; background-color:red;\}  
</style>  
<body>  
<div>请点击这里</div>  
</body>  
  
设置多个 CSS 属性/值对  
语法：$(selector).css(\{property:value, property:value, ...\})  
把“名/值对”对象设置为所有匹配元素的样式属性。  
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。  
\{property:value\}：必需。规定要设置为样式属性的“名称/值对”对象。  
该参数可包含若干对 CSS 属性名称/值。比如 \{"color":"red","font-weight":"bold"\}  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").css(\{  
      "color":"white",  
      "background-color":"\#98bf21",  
      "font-family":"Arial",  
      "font-size":"20px",  
      "padding":"5px"  
    \});  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  
<button type="button">改变段落的样式</button>  
</body>  
  
（2）height() 方法：  
height() 方法返回或设置匹配元素的高度。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").height(50);  
  \});  
\});  
</script>  
<body>  
<p style="background-color:yellow">This is a paragraph.</p>  
<button class="btn1">改变高度</button>  
</body>  
  
返回高度  
返回第一个匹配元素的高度。  
如果不为该方法设置参数，则返回以像素计的匹配元素的高度。  
语法：$(selector).height()  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("span").text($("p").height());  
  \});  
\});  
</script>  
<body>  
<p>本段落的高度是 <span>unknown</span> px。</p>  
<button class="btn1">获得高度</button>  
</body>  
  
设置高度  
设置所有匹配元素的高度。  
语法：$(selector).height(length)  
length：可选。规定元素的高度。  
如果没有规定长度单位，则使用默认的 px 单位。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").height(50);  
  \});  
\});  
</script>  
<body>  
<p style="background-color:yellow">This is a paragraph.</p>  
<button class="btn1">改变高度</button>  
</body>  
  
使用函数来设置高度  
使用函数来设置所有匹配元素的高度。  
语法：$(selector).height(function(index,oldheight))  
function(index,oldheight)：规定返回被选元素新高度的函数。  
    index - 可选。接受选择器的 index 位置  
    oldvalue - 可选。接受选择器的当前值。  
      
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").height(function(n,c)\{  
    return c+10;  
    \});  
  \});  
\});  
</script>  
<body>  
<p style="background-color:yellow">这是一个段落.</p>  
<button>以 10 像素的幅度增加 p 元素的高度</button>  
</body>  
  
获得文档和窗口元素的高度  
使用 height() 方法来获得 document 和 window 元素的当前高度。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("\#span1").text($(window).height());  
    $("\#span2").text($(document).height());  
  \});  
\});  
</script>  
<body>  
<p>窗口的高度是 <span id="span1">unknown</span> px。</p>  
<p>文档的高度是 <span id="span2">unknown</span> px。</p>  
<button class="btn1">获得高度</button>  
<p>在本例中，窗口和文档的高度是相同的，因为它们在 iframe 中显示。</p>  
</body>  
  
使用 em 和 % 值来设置高度  
使用指定的长度单位来设置元素的高度。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("\#span1").text($(window).height());  
    $("\#span2").text($(document).height());  
  \});  
\});  
</script>  
<body>  
<p>窗口的高度是 <span id="span1">unknown</span> px。</p>  
<p>文档的高度是 <span id="span2">unknown</span> px。</p>  
<button class="btn1">获得高度</button>  
<p>在本例中，窗口和文档的高度是相同的，因为它们在 iframe 中显示。</p>  
</body>  
  
（3）offset() 方法：  
offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    x=$("p").offset();  
    $("\#span1").text(x.left);  
    $("\#span2").text(x.top);  
  \});  
\});  
</script>  
<body>  
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>  
<button>获得 offset</button>  
</body>  
  
返回偏移坐标  
返回第一个匹配元素的偏移坐标。  
该方法返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。  
语法：$(selector).offset()  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    x=$("p").offset();  
    $("\#span1").text(x.left);  
    $("\#span2").text(x.top);  
  \});  
\});  
</script>  
<body>  
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>  
<button>获得 offset</button>  
</body>  
  
设置偏移坐标  
  
设置所有匹配元素的偏移坐标。  
语法：$(selector).offset(value)  
value：必需。规定以像素计的 top 和 left 坐标。  
可能的值：  
    值对，比如 \{top:100,left:0\}  
    带有 top 和 left 属性的对象  
      
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").offset(\{top:100,left:0\});  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<button>设置新的偏移</button>  
</body>  
  
使用函数来设置偏移坐标  
使用函数来设置所有匹配元素的偏移坐标。  
语法：$(selector).offset(function(index,oldoffset))  
function(index,oldoffset)：规定返回被选元素新偏移坐标的函数。  
    index - 可选。接受选择器的 index 位置  
    oldvalue - 可选。接受选择器的当前坐标。  
      
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").offset(function(n,c)\{  
        newPos=new Object();  
        newPos.left=c.left+100;  
        newPos.top=c.top+100;  
        return newPos;  
    \});  
  \});  
\});  
</script>  
<body>  
<p>这是一个段落。</p>  
<button>设置 p 元素的 offset 坐标</button>  
</body>  
  
使用对象来为对象设置新的 offset 值  
使用新对象中的坐标来定位元素。  
<script type="text/javascript">  
newPos=new Object();  
newPos.left="0";  
newPos.top="100";  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").offset(newPos);  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<button>设置新的偏移</button>  
</body>  
  
使用另一个元素的位置来为元素设置新的 offset 值  
使用已有对象的位置来定位元素。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").offset($("span").offset());  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<button>为段落设置偏移</button>  
<span id="middlepos" style="position:absolute;left:100px;top:150px;">This is a span</span>  
</body>  
  
（4）offsetParent() 方法：  
offsetParent() 方法返回最近的祖先定位元素。  
定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。  
可以通过 jQuery 设置 position，或者通过 CSS 的 position 属性。  
语法：$(selector).offsetParent()  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").offsetParent().css("background-color","red");  
  \});  
\});  
</script>  
<body>  
<div style="width:70%;position:absolute;left:100px;top:100px">  
<div style="margin:50px;background-color:yellow">  
<p>点击下面的按钮可以设置本段落的最近的父（祖先）元素的背景色。</p>  
<div>  
</div>  
<button>点击这里</button>  
</body>  
  
（5）position() 方法：  
position() 方法返回匹配元素相对于父元素的位置（偏移）。  
该方法返回的对象包含两个整型属性：top 和 left，以像素计。  
此方法只对可见元素有效。  
语法：$(selector).position()  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    x=$("p").position();  
    alert("Left position: " + x.left + " Top position: " + x.top);  
  \});  
\});  
</script>  
<body>  
<p>This is a paragraph.</p>  
<button>获得 p 元素的位置坐标</button>  
</body>  
  
（6）scrollLeft() 方法：  
scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。  
滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("div").scrollLeft(100);  
  \});  
\});  
</script>  
<body>  
<div style="border:1px solid black;width:100px;height:130px;overflow:auto">  
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.  
</div>  
<button class="btn1">把滚动条的水平位置设置为 100px</button>  
</body>  
  
返回水平滚动条位置  
返回第一个匹配元素的水平滚动条位置。  
语法：$(selector).scrollLeft()  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    alert($("div").scrollLeft()+" px");  
  \});  
\});  
</script>  
<body>  
<div style="border:1px solid black;width:100px;height:130px;overflow:auto">  
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.  
</div>  
<button class="btn1">获得滚动条的水平位置</button>  
<p>试着移动滚动条，然后再次点击按钮。</p>  
</body>  
  
设置水平滚动条位置  
设置所有匹配元素的水平滚动条位置。  
语法：$(selector).scrollLeft(position)  
position：可选。规定以像素计的新位置。  
  
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("div").scrollLeft(100);  
  \});  
\});  
</script>  
<body>  
<div style="border:1px solid black;width:100px;height:130px;overflow:auto">  
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.  
</div>  
<button class="btn1">把滚动条的水平位置设置为 100px</button>  
</body>  
  
（7）scrollTop() 方法：  
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。  
scroll top offset 指的是滚动条相对于其顶部的偏移。  
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。  
语法：$(selector).scrollTop(offset)  
offset：可选。规定相对滚动条顶部的偏移，以像素计。  
注释：该方法对于可见元素和不可见元素均有效。  
注释：当用于获取值时，该方法只返回第一个匹配元素的 scroll top offset。  
注释：当用于设置值时，该方法设置所有匹配元素的 scroll top offset。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("div").scrollTop(100);  
  \});  
  $(".btn2").click(function()\{  
    alert($("div").scrollTop()+" px");  
  \});  
\});  
</script>  
<body>  
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
</div>  
<button class="btn1">把 scroll top offset 设置为 100px</button>  
<br />  
<button class="btn2">获得 scroll top offset</button>  
</body>  
  
  
获得当前的 scroll top offset  
使用 scrollTop() 方法获得 scroll top offset。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    alert($("div").scrollTop()+" px");  
  \});  
\});  
</script>  
<body>  
<div style="border:1px solid black;width:200px;height:200px;overflow:auto">  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
This is some text. This is some text. This is some text. This is some text.  
</div>  
<button class="btn1">获得 scrollbar top offset</button>  
<p>试着移动滚动条，然后再次点击按钮。</p>  
</body>  
  
（8）width() 方法：  
width() 方法返回或设置匹配元素的宽度。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").width(200);  
  \});  
\});  
</script>  
<body>  
<p style="background-color:yellow">This is a paragraph.</p>  
<button class="btn1">改变宽度</button>  
</body>  
  
返回宽度  
返回第一个匹配元素的宽度。  
如果不为该方法设置参数，则返回以像素计的匹配元素的宽度。  
语法：$(selector).width()  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("span").text($("p").width());  
  \});  
\});  
</script>  
<body>  
<p>本段落的宽度是 <span>unknown</span> px。</p>  
<button class="btn1">获得宽度</button>  
</body>  
  
设置宽度  
设置所有匹配元素的宽度。  
语法：$(selector).width(length)  
length：可选。规定元素的宽度。  
如果没有规定长度单位，则使用默认的 px 单位。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").width(200);  
  \});  
\});  
</script>  
<body>  
<p style="background-color:yellow">This is a paragraph.</p>  
<button class="btn1">改变宽度</button>  
</body>  
  
使用函数来设置宽度  
使用函数来设置所有匹配元素的宽度。  
语法：$(selector).width(function(index,oldwidth))  
function(index,oldwidth)：规定返回被选元素新宽度的函数。  
    index - 可选。接受选择器的 index 位置  
    oldvalue - 可选。接受选择器的当前值。  
      
<script type="text/javascript">  
$(document).ready(function()\{  
  $("button").click(function()\{  
    $("p").width(function(n,c)\{  
    return c-50;  
    \});  
  \});  
\});  
</script>  
</head>  
<body>  
<p style="background-color:yellow">这是一个段落。</p>  
<button>以 50 像素的幅度减少 p 元素的宽度</button>  
</body>  
  
获得文档和窗口元素的宽度  
使用 width() 方法来获得 document 和 window 元素的当前宽度。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("\#span1").text($(window).width());  
    $("\#span2").text($(document).width());  
  \});  
\});  
</script>  
<body>  
<p>窗口的宽度是 <span id="span1">unknown</span> px。</p>  
<p>文档的宽度是 <span id="span2">unknown</span> px。</p>  
<button class="btn1">获得宽度</button>  
<p>在本例中，窗口和文档的宽度是相同的，因为它们在 iframe 中显示。</p>  
</body>  
  
使用 em 和 % 值来设置宽度  
使用指定的长度单位来设置元素的宽度。  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
    $("p").width("50%");  
  \});  
  $(".btn2").click(function()\{  
    $("p").width("20em");  
  \});  
\});  
</script>  
<body>  
<p style="background-color:yellow">This is a paragraph.</p>  
<button class="btn1">把宽度设置为 50%</button>  
<button class="btn2">把宽度设置为 20 em</button>  
</body>