CSS

优质

小牛编辑

140浏览

2023-12-01

jQuery库支持Cascading Style Sheet（CSS）规范1到3中包含的几乎所有选择器，如万维网联盟网站所述。

只要浏览器启用了JavaScript，使用JQuery库开发人员就可以增强他们的网站，而无需担心浏览器及其版本。

大多数JQuery CSS方法不修改jQuery对象的内容，它们用于在DOM元素上应用CSS属性。

应用CSS属性

使用JQuery方法css( PropertyName, PropertyValue )应用任何CSS属性非常简单。

以下是该方法的语法 -

<b>selector</b>.css( PropertyName, PropertyValue );

在这里，您可以将PropertyName作为javascript字符串传递，并根据其值， PropertyValue可以是字符串或整数。

例子 (Example)

以下是将字体颜色添加到第二个列表项的示例。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

应用多个CSS属性

您可以使用单个JQuery方法CSS( {key1:val1, key2:val2....)应用多个CSS属性。您可以在一次通话中应用任意数量的属性。

以下是该方法的语法 -

<b>selector</b>.css( {key1:val1, key2:val2....keyN:valN})

在这里，您可以将key作为property和val传递为其值，如上所述。

例子 (Example)

以下是将字体颜色和背景颜色添加到第二个列表项的示例。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

设置元素宽度和高度

width( val )和height( val )方法可用于分别设置任何元素的宽度和高度。

例子 (Example)

下面是一个简单的例子，它设置第一个分割元素的宽度，其中其余元素的宽度由样式表设置

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div:first").width(100);
            $("div:first").css("background-color", "blue");
         });
      </script>
      <style>
         div { 
            width:70px; height:50px; float:left; 
            margin:5px; background:red; cursor:pointer; 
         }
      </style>
   </head>
   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

JQuery CSS方法

下表列出了可用于使用CSS属性的所有方法 -

Sr.No.	方法和描述
1	css( name ) 在第一个匹配的元素上返回一个样式属性。
2	css( name, value ) 将单个样式属性设置为所有匹配元素的值。
3	css( properties ) 将键/值对象设置为所有匹配元素的样式属性。
4	height( val ) 设置每个匹配元素的CSS高度。
5	height( ) 获取第一个匹配元素的当前计算，像素，高度。
6	innerHeight（）获取第一个匹配元素的内部高度（不包括边框并包含填充）。
7	innerWidth（）获取第一个匹配元素的内部宽度（不包括边框并包含填充）。
8	offset( ) 获取相对于文档的第一个匹配元素的当前偏移量（以像素为单位）。
9	offsetParent( ) 返回具有第一个匹配元素的定位父级的jQuery集合。
10	outerHeight（[margin]）获取第一个匹配元素的外部高度（包括默认情况下的边框和填充）。
11	outerWidth（[margin]）获取第一个匹配元素的外部宽度（默认包括边框和填充）。
12	position( ) 获取元素相对于其偏移父级的顶部和左侧位置。
13	scrollLeft（val）传入值时，滚动左偏移量将设置为所有匹配元素上的值。
14	scrollLeft（）获取第一个匹配元素的向左滚动偏移量。
15	scrollTop（val）传入值时，滚动顶部偏移量将设置为所有匹配元素上的值。
16	scrollTop（）获取第一个匹配元素的滚动顶部偏移量。
17	width( val ) 设置每个匹配元素的CSS宽度。
18	width( ) 获取第一个匹配元素的当前计算，像素，宽度。