jQuery操作css属性

最新推荐文章于 2022-10-05 11:00:19 发布
最新推荐文章于 2022-10-05 11:00:19 发布
阅读量118 收藏
点赞数
分类专栏： #前端思维框架 文章标签： CSS JQery
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_39565202/article/details/103393954
版权

jQuery操作css属性

 css()方式操作

                                          语法：

css(property)   取值

css(property, value) 赋值

css(map)

css(property, function)

width()

height()

                                       效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script>
				function changeBgColor(){
				$('#tt').css('background-color','yellow');
				}
				function changefont(){
					var dd = $("#tt");
					dd.css({'font-family':'楷书','font-size':'20px'});
				}
				function changewide(){
					//$("#tt").css({'width':'100px','height':'100px'});
					
					//上面方式太麻烦，直接用jq特有方法。
					$("#tt").width('500px');
					$("#tt").height('300px');
				}
		</script>
	</head>
	<body>
		<input type="button" value="改变背景颜色"  onclick="changeBgColor()" />
		<input type="button" value="改变字体样式" id="btn1" onclick="changefont()"/>
		<input type="button" value="改变背景大小" id="btn1" onclick="changewide()"/>
		<hr />
		<textarea id="tt" style="width:300px;height:200px">你好你好你好</textarea>
	</body>
</html>

addClass方式操作

语法

addClass()

removeClass()

toggleClass()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				background-color: pink;
			}
			.div2{
				font-family: 宋体;
				font-size:  30px;
			}
			.div3{
				width: 300px;
				height: 200px;
			}
		</style>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script>
				function changeBgColor(){
				$('#tt').addClass('div1');
				}
				function toggleColor(){
				$('#tt').toggleClass('div1');
				}
				function changefont(){
				$('#tt').addClass('div2');
				}
				function toggleFont(){
				$('#tt').toggleClass('div2');
				}
				function changewide(){
				$('#tt').addClass('div3');
				}
				function toggleWide(){
				$('#tt').toggleClass('div3');
				}
				function removeAll(){
				$('#tt').removeClass('div1');
				$('#tt').removeClass('div2');
				$('#tt').removeClass('div3');
				}
				
		</script>
	</head>
	<body>
		<input type="button" value="改变背景颜色"  onclick="changeBgColor()" ondblclick="toggleColor()"/>
		<input type="button" value="改变字体样式"  onclick="changefont()" ondblclick="toggleFont()"/>
		<input type="button" value="改变背景大小"  onclick="changewide()" ondblclick="toggleWide()"/>
		<input type="button" value="清除格式"  onclick="removeAll()" "/>
		<hr />
		<textarea id="tt" >你好你好你好</textarea>
	</body>
</html>

案例：隔行换色

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#btn{
				position: fixed;
				left: 50%;
			}
			.trr1{
				background-color: lightpink;
			}
			.trr2{
				background-color: lightblue;
			}
		</style>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script>
			function c1(){
				$('tr:even').addClass('trr1');
				$('tr:odd').addClass('trr2');
			}
		</script>
	</head>
	<body>
		<table align="center" width="50%" border="1px" cellspacing="0" align="center">
			<tr  align="center">
				<td>ID</td>
				<td>NAME</td>
				<td>AGE</td>
			</tr>
			<tr align="center">
				<td>001</td>
				<td>路飞</td>
				<td>22</td>
			</tr>
			<tr align="center">
				<td>002</td>
				<td>索隆</td>
				<td>21</td>
			</tr>
			<tr align="center">
				<td>003</td>
				<td>山治</td>
				<td>20</td>
			</tr>
	</table>
	<hr />
	<input type="button" value="样式1" id="btn" onclick="c1()" align="center" />
	</body>
</html>

 

好吃的都给你呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery中的CSS属性及操作
m0_63498249的博客
08-13 2255
JQuery中的css()方法、JQuery的CSS操作、JQuery的class操作
jQuery属性操作
Hst1120的博客
11-22 1105
jQuery属性操作 1.1设置或获取元素固有属性(元素本身只带的属性)属性值prop() 1.获取属性语法 prop(“属性”) 2.设置属性语法 prop(“属性”,“属性值”) 1.2设置或获取元素自定义属性attr() 1.3数据缓存 data() data()方法可以在指定的元素上存数据，是存放在元素的内存里面，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据将被移除 <a href="www.baidu.com" title="很好">都挺好</a> &lt
jQuery操作css方法
qi341500的博客
10-05 1万+
一、jQuery可以使用css方法来修改元素样式 二、设置类的样式方法 1.添加类 2.移除类 3.切换类 三、类操作与className区别 四、显示隐藏效果 1、显示语法 2、隐藏语法 3、切换语法 五、滑动效果 1、上滑效果语法 2、下滑效果语法 3、滑动切换效果语法 4、事件切换 六、动画队列及其停止排队方法 1、动画或效果队列 2、停止排队 七、淡入淡出效果 1、淡入效果语法 2、淡出效果语法 3、淡入淡出切换效果语法 4、渐进方式调整到指定的不透明度
jquery添加click事件，jq动态添加click事件多种方式分享
请告诉他
11-12 5489
目录： 添加方式 实例演示 其中方式有一下几种 $("#ImId1").click(function(){}); $("#ImId2").bind("click",function(){}) $("#ImId3").on("click",function(){}) $("body").delegate("#xxx","click",function(){}) 实例演示： 导入jq <script type="text/javascrip...
jquery 属性操作 attr( ) prop（）css( ）区别
JiM-W 的博客
01-13 7308
attr () 和 prop( ) css( )
jquery操作css属性
丽丽大神ing的博客
08-24 160
参考链接：http://www.w3school.com.cn/jquery/css_css.asp <script> $("p").css({ "color":"white", "background-color":"#98bf21", "background-position":"0 0", "font-family":"Arial", "font-si...
jQuery之属性操作
m0_56712012的博客
04-25 387
文章目录1.jQuery属性操作1.1 元素固有属性值 prop()1.2 元素自定义属性值 attr()1.3 数据缓存 data()2. jQuery 文本属性值3. jQuery 元素操作3.1 遍历元素3.1.1 each()3.1.2 $.each()3.2 创建元素、添加元素、删除元素4. jQuery 尺寸、位置操作4.1 jQuery 尺寸操作4.2 jQuery 位置操作5. 总结 1.jQuery属性操作 1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比
jQuery 设置 CSS 属性示例介绍
12-08
在本文中，我们将深入探讨如何使用jQuery来设置CSS属性，并通过示例进行详细解释。 首先，让我们了解一下基本语法。如果你需要设置单个CSS属性，你可以使用`css()`方法，传入属性名称和值作为参数。例如，如果你想...
jQuery操作css样式
10-19
在文章中，作者通过示例展示了如何使用jQuery操作CSS的位置和尺寸。对于位置操作，可以使用`.css('top', value)`和`.css('left', value)`来改变元素的相对位置。尺寸操作则包括`.css('width', value)`和`.css('...
jQuery操作属性和样式详解
10-22
本文将深入探讨jQuery如何操作属性和样式，帮助开发者更好地理解和应用这一强大的工具。 首先，我们需要理解DOM（Document Object Model）属性与元素属性的区别。在HTML中，像`id`、`src`和`alt`这样的属性被称为...
jQuery学习笔记 操作jQuery对象 CSS处理
12-09
还可以一次性为同一元素设置多个CSS属性 CSS尺寸属性处理 方法 描述 height() 获取元素CSS属性height的值 width() 获取元素CSS属性width的值。这两个方法获取的是元素在页面中的实际高度宽度值，多用于...
jQuery修改CSS伪元素属性的方法
10-25
CSS伪元素不是DOM元素，因此你无法直接选择到它们。下面与大家分享两种不错的修改方法，需要的朋友可以参考下
jQuery操作css属性等操作
热门推荐
CSDNzhaojiale的博客
06-17 1万+
操作css属性 jQuery操作css属性主要依靠：css方法 设置css方法: 逐个设置: 在css方法中传入属性,值 两者用逗号隔开 设置完一个属性，同样的方法重新设置另一个属性 链式设置 在css方法中传入属性,值 两者用逗号隔开 设置完一个属性,在后面 .css(属性,值) 设置另一个，可以一直链下去 批量设置 在css方法中传入一个对象 对象上写要设置的属性和值 和设置css属性的写法一样 获取css方法: 在方法中传入要获取属性即可 // 1
jQuery修改操作css属性实现方法
suxue1994的博客
04-12 905
   1.   如需设置单一的 CSS 属性，使用如下语法： css("元素名","元素属性");下面的例子将为所有匹配元素设置 background-color 值： 实例 $("p").css("background-color","yellow"); 2.  设置多个 CSS 属性 如需设置多个 CSS 属性，请使用如下语法： css({"元素名":&quot
cssText文本格式化与属性操作
weixin_43170073的博客
05-14 358
通过cssText进行对HTML标签进行设置 <style type="text/css"> div{/*width: 100px;height: 100px;*/border:1px solid #333;}/*在此处先为dix设置边框*/ </style> </head> <body> <div id="div1">123<...
ECMAScript
详情请看注释
12-03 3017
ECMAScript是JavaScript的核心，规定了JS的语法规范 ECMAScript 常量 12 // 整数类型常量 1.2 // 浮点数类型常量 "hello world" // 字符串类型常量 'Hi' // 字...
jQuery阅读协议倒计时
详情请看注释
12-05 748
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> span{ position: fixed; left: 47%; } input{ positio...
jQuery数组内容显示到下拉列表
详情请看注释
12-05 701
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery.js" ></script> <scr...
jquery 操作dom改变css
最新发布
05-25
使用 jQuery 操作 DOM 改变 CSS 的方法如下： 1. 选取需要改变 CSS 样式的元素，可以使用 jQuery 的选择器来选取元素。 2. 使用 `.css()` 方法来改变 CSS 样式，该方法接受两个参数，第一个参数是 CSS 属性名称，第...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值