关注我们

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属性-的所有方法

Sr.No.	Method & Remark
1	css( name ) 返回第一个匹配元素的Style属性。
2	css( name, value ) 将单个样式属性设置为所有匹配元素的值。
3	css( properties ) 将键/值对象设置为所有匹配元素的样式属性。
4	height( val ) 设置每个匹配元素的CSS高度。
5	height( ) 获取第一个匹配元素的当前计算的像素高度。
6	innerHeight( ) 获取第一个匹配元素的内部高度(不包括边框并包括填充)。链接：https://www.learnfk.comhttps://www.learnfk.com/jquery/jquery-css.html 来源：LearnFk无涯教程网
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( ) 获取第一个匹配元素的当前计算的像素宽度。无涯教程网

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

趣谈网络协议 -〔刘超〕

数据结构与算法之美 -〔王争〕

从0开始学大数据 -〔李智慧〕

OpenResty从入门到实战 -〔温铭〕

WebAssembly入门课 -〔于航〕

React Hooks 核心原理与实战 -〔王沛〕

Spring Cloud 微服务项目实战 -〔姚秋辰（姚半仙）〕

运维监控系统实战笔记 -〔秦晓辉〕

AI大模型企业应用实战 -〔蔡超〕

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