zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

jQuery方法对象CSS 设置 获取 利用 动态
2023-09-27 14:25:56 时间
需求说明


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


61.png

实现思路


在 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;

 height: 200px;

 width: 400px;

 float: left;

 margin-right: 20px;

 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 

 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 

前端祖传三件套CSS的各种选择器之组合/复合选择器 前端开发者经常使用CSS来定义网页样式,包括颜色、布局和字体等。在CSS中,选择器是指用于选择HTML元素并应用样式的模式。有许多不同类型的CSS选择器可供使用,但本文将着重介绍组合/复合选择器。
前端祖传三件套CSS的各种选择器之class选择器 在前端开发中,CSS是不可或缺的一部分,而选择器则是CSS最重要的组成部分之一。其中,class选择器被广泛应用于HTML文档中,可以根据元素的class属性值来选取HTML元素,并为其添加样式。以下将详细介绍class选择器的使用方法以及应用场景。
前端祖传三件套CSS的各种选择器之id选择器 在CSS中,选择器是用来选取HTML元素的一种方式,而id选择器则是其中最常用也最重要的一种。id选择器可以根据元素的唯一id属性来选取HTML元素,并为其添加样式。以下将详细介绍id选择器的使用方法以及应用场景。
前端祖传三件套CSS的各种选择器之属性选择器 当今互联网时代,前端开发已成为互联网领域不可或缺的一部分。而CSS则是前端开发中最为重要的技术之一,它用于定义HTML文档的呈现方式,从而使得网页可以更加美观、功能更加强大。在CSS中,选择器是一个非常重要的概念,其中属性选择器更是被称为祖传三件套之一。
前端祖传三件套CSS的各种选择器之标签选择器 CSS是前端开发中最基础和最重要的技术之一。它可以通过样式定义来控制页面元素的外观和布局。在这篇文章中,我们将介绍CSS的选择器之一——标签选择器。
css选择器以及权重这次我是真的弄懂了 css作为前端的三大基石,对于我们前端开发来说极其重要。其中css选择器在日常开发中天天会碰到,但是每种类型的选择器你真的都弄懂弄透彻了吗?下面请跟随笔者的步伐在来温习一遍。希望能对你有所帮助。