使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
程序员文章站
2022-03-11 10:50:52
查看本章节查看作业目录需求说明:使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 和 标签的样式实现思路:在 HTML 页面中导入 jQuery 框架 在页面加载完毕事件中,获取 标签对象,调用 css() 方法,设置字体颜色为红色在页面加载完毕事件中,获取 标签对象,调用 css() 方法,去掉 标签的下...
查看本章节
查看作业目录
需求说明:
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
实现思路:
-
在 HTML 页面中导入 jQuery 框架 在页面加载完毕事件中,获取 <span> 标签对象,调用 css() 方法,设置字体颜色为红色
-
在页面加载完毕事件中,获取 <a> 标签对象,调用 css() 方法,去掉 <a> 标签的下划线
-
在页面加载完毕事件中,获取 id 为 score 的 <span> 标签对象,调用 css() 方法,设置字体颜色为橙色
-
在页面加载完毕事件中,获取 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