jQuery - CSS操作

首页 / jQuery入门教程 / jQuery - CSS操作

大多数jQuery CSS方法都不会修改jQuery对象的内容,而是用于将CSS属性应用于DOM元素。

CSS属性

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

selector.css( PropertyName, PropertyValue );

这里可以将PropertyName作为javascript字符串传递,根据它的值,PropertyValue可以是字符串或整数。

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

<html>
   <head>
      <title>The jQuery 示例</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>

这将产生以下输出-

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6

多个CSS属性

您可以使用单个JQuery方法应用多个CSS属性CSS({key1:val1,key2:val2.)。您可以在单个调用中应用任意多个属性。

selector.css( {key1:val1, key2:val2....keyN:valN})

在这里,您可以传递key作为属性,val作为其值,如上所述。

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

<html>
   <head>
      <title>The jQuery 示例</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>

这将产生以下输出-

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6

设置宽高度

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

下面是一个简单的示例,它设置了第一个除法元素的宽度,其余元素的宽度由样式表设置

<html>
   <head>
      <title>The jQuery 示例</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属性-的所有方法

链接:https://www.learnfk.comhttps://www.learnfk.com/jquery/jquery-css.html

来源:LearnFk无涯教程网

Sr.No.Method & Remark
1 css( name )

返回第一个匹配元素的Style属性。

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( )

获取第一个匹配元素的当前计算的像素宽度。

这一章《jQuery - CSS操作》你学到了什么?在下面做个笔记吧!做站不易,你的分享是对我们最大的支持,感谢!😊

好记忆不如烂笔头。留下你的足迹吧 :)

猜你喜欢

玩转Spring全家桶 -〔丁雪丰〕

分布式协议与算法实战 -〔韩健〕

说透5G -〔杨四昌〕

商业思维案例笔记 -〔曹雄峰〕

使用带有 bootstrap 验证的 Ajax 函数时出现问题

Electron:未定义 jQuery

你能在不影响历史的情况下使用哈希导航吗?

未捕获的类型错误:无法读取未定义的属性“toLowerCase”

通过单击按钮获取表格行的内容

Bootstrap datepicker Select 后隐藏

视频教程

jQuery-12-基本选择器后两个 更多视频教程 »