欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式

程序员文章站 2022-03-11 10:50:52

查看本章节

查看作业目录


需求说明:

使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式

使用 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>

 

本文地址:https://blog.csdn.net/weixin_44893902/article/details/109633164