技術文章 » 使用 jQuery 基本選擇器獲取頁面元素，然後利用 jQuery 物件的 css() 方法動態設定 ＜span＞ 和 ＜a＞ 標籤的樣式

使用 jQuery 基本選擇器獲取頁面元素，然後利用 jQuery 物件的 css() 方法動態設定 ＜span＞ 和 ＜a＞ 標籤的樣式

2020-11-13 11:02:11

檢視本章節

檢視作業目錄

需求說明：

使用 jQuery 基本選擇器獲取頁面元素，然後利用 jQuery 物件的 css() 方法動態設定 <span> 和 <a> 標籤的樣式

實現思路：

  1. 在 HTML 頁面中匯入 jQuery 框架 在頁面載入完畢事件中，獲取 <span> 標籤物件，呼叫 css() 方法，設定字型顏色為紅色

  2. 在頁面載入完畢事件中，獲取 <a> 標籤物件，呼叫 css() 方法，去掉 <a> 標籤的下劃線

  3. 在頁面載入完畢事件中，獲取 id 為 score 的 <span> 標籤物件，呼叫 css() 方法，設定字型顏色為橙色

  4. 在頁面載入完畢事件中，獲取 class 為 more 的 <a> 標籤物件，呼叫 css() 方法，設定 <a> 標籤的下劃線

實現程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				font-size: 14px;
			}
			dl{
				height: 200px;
				width: 400px;
			}
			dt{
				float: left;
				margin-right: 20px;
			}
			dd{
				line-height: 20px;
			}
		</style>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("dd>span").css("color","red");
				$("#score").css("color","orange");
				$("a").css({"text-decoration":"none","color":"blue"})
				$(".more").css("text-decoration","underline")
			})
		</script>
	</head>
	<body>
		<dl>
			<dt><img src="img/bg.png" width="150" height="200"></dt>
			<dd><span>評分：</span><span id="score">8.4</span></dd>
			<dd><span>別名：<span>冰雪大冒險/魔雪奇緣</dd>
			<dd><span>演員：</span>易迪娜門澤爾<a href="#"></a></dd>
			<dd><span>導演：</span><a href="#">克里斯·巴克Jennifer Lee</a></dd>
			<dd><span>地區：</span>美國</dd>
			<dd><span>簡介：</span>Frozen》講述一個詛咒令王國被冰天雪地永久覆蓋，樂觀無畏的安娜（由克里斯汀·貝爾配音）和一個大膽的...</dd>
			<dd><a href="#" class="more">more</a></dd>
		</dl>
	</body>
</html>