【web前端(三十九)】javascript_jquery操作样式

最新推荐文章于 2021-05-18 10:46:16 发布

_临渔_

最新推荐文章于 2021-05-18 10:46:16 发布

阅读量134

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/LED_of_Java/article/details/99664465

版权

Java 专栏收录该内容

118 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>操作样式</title>
		<style>
			/*div.a1{
				border: 5px double #000;
			}*/
			
			/*
			 * 类选择器
			 */
			.a1{
				height: 100px;
				width: 100px;
			}	
			.a2{
				border: 2px solid #000;
			}
			
			div{
				height: 30px;
				/*设行高*/
				/*当行高和块的高度一样时，
				 文字刚好在中间。*/
				line-height: 30px;
			}
		</style>
		<script type="text/javascript" src="../js/jQuery/jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(
				function(){
					/*添加样式*/
						//只给第一行加括号里的属性
//					$("div:first").css("background-color","pink");

					/*
					 * 过滤选择器
					 */
						//只给奇数行加括号里的属性
//					$("div:even").css("background-color","pink");
						//只给偶数行加括号里的属性
//					$("div:odd").css("background-color","darkgray");
						//eq(2)表示索引为2的行加括号里的属性
					$("div:eq(2)").css("background-color","darkgray");
						
						//这里是大于第二行的加括号里的属性
						//且括号里类名可以有很多，可以选很多行
					$("div:gt(2)").addClass("a1 a2");
					
					
						/*删除样式*/
						//删掉奇数行
					$("div:even").removeClass("a1 a2");
						
						
						/*切换样式*/
						/*
						 * 标签选择器
						 */
						//给button加click事件
					$("button").click(
						function(){
								//这里toggleClass可以让属性在不同行之间切换
							$("div:gt(2)").toggleClass("a1 a2");
						}
					);
				}
			 );
		</script>
	</head>
	<body>
		<button>切换</button>
		<div style="background-color: deeppink;">我是一颗海草</div>
		<div>我是一颗海草</div>
		<div>我是一颗海草</div>
		<div>我是一颗海草</div>
		<div>我是一颗海草</div>
	</body>
</html>

_临渔_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【web前端(三十九)】javascript_jquery操作样式

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>操作样式</title> <style> /*div.a1{ border: 5px double #000; }*/ /* * 类选择器...
复制链接

扫一扫