HTML使用jQuery实现两个点击按钮,分别控制改文本字体颜色和字体大小

news/2024/9/23 11:42:36/
htmledit_views">

jQuery 简介

jQuery 是一个广泛使用的 JavaScript 库,旨在简化对 HTML 文档的操作、事件处理、动画效果和 AJAX 等操作。

案例源码

html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text Font Color and Size</title>
<style>#text {font-size: 16px;color: black;}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){// 控制字体颜色$("#color-btn").click(function(){var colors = ["red", "blue", "green", "orange", "purple"]; // 可以自定义颜色var randomColor = colors[Math.floor(Math.random() * colors.length)];$("#text").css("color", randomColor);});// 控制字体大小$("#size-btn").click(function(){var fontSize = Math.floor(Math.random() * 20 + 16); // 16到35之间的随机字体大小$("#text").css("font-size", fontSize + "px");});
});
</script>
</head>
<body><button id="color-btn">Change Color</button>
<button id="size-btn">Change Size</button>
<p id="text">实例</p></body>
</html>

案例效果图

“Change Color”为变换字体颜色,“Change Size”为变换字体大小

 


http://www.ppmy.cn/news/1430746.html

相关文章

畅游网络:构建C++网络爬虫的指南

概述 随着信息时代的来临&#xff0c;网络爬虫技术成为数据采集和网络分析的重要工具。本文旨在探讨如何运用C语言及其强大的cpprestsdk库构建一个高效的网络爬虫&#xff0c;以便捕捉知乎等热点信息。为了应对IP限制的挑战&#xff0c;我们将引入亿牛云爬虫代理服务&#xff…

JavaScript零基础进阶2024详解

数组 JS中的数组相当于Java中的集合 数组长度可变 元素可变 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…

华火电燃灶:烹饪艺术与科技创新的完美融合

华火电燃灶&#xff0c;以纯净电力激发明火之美&#xff0c;无须燃气&#xff0c;尽释碳负。每一道佳肴背后&#xff0c;都是对安全与健康的无声誓言&#xff0c;为家庭温馨瞬间添上一抹灿烂。从宝贝初声啼哭到晚年宁静美好&#xff0c;华火见证家的每一次幸福团聚&#xff0c;…

mybatis使用xml中的if-else/choose

最近需要使用 xml 文件来实现一些增删改查&#xff0c;此文对 其中的 if-else 加以说明 背景&#xff1a; 有一个引用类&#xff0c;假设叫 Student public class Student {private String name; private String address; private Integer yn;}现在我们查询条件也被封装成一个…

maven3.9的settings.xml 内容学习

settings.xml 文件介绍 settings.xml 是 Maven 的配置文件&#xff0c;它允许你自定义 Maven 的行为&#xff0c;比如设置仓库、代理、认证信息等。在 Maven 3.9 中&#xff0c;settings.xml 的结构和内容可能与之前的版本相似&#xff0c;但可能会有一些小的改进或变化。下面…

nacos配置mysql(windows)

nacos默认是使用的内置数据库derby ,可通过配置修改成mysql,修改成mysql之后&#xff0c;之前配置在derby的数据会丢失 本文使用mysql版本为8.0.22 nacos版本为2.3.1 在mysql里面先创建一个数据库test(名称自定义&#xff0c;和后面配置文件里面的一样就好了) 在上面创建的数据…

element UI 走马灯 initial-index动态赋值 不生效问题

图片列表点击展示大图&#xff0c;点开不是当前的图片 initial-index属性动态赋值不生效 解决方法&#xff1a; 1.设置initial-index初始值为null initialIndex:null2.设置走马灯轮播数组初始化为[] imgList:[]3.点击图片获取图片的索引&#xff0c;赋值给initialIndex&#x…

Leetcode 225:用队列实现栈

请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、pop 和 empty&#xff09;。 实现 MyStack 类&#xff1a; void push(int x) 将元素 x 压入栈顶。int pop() 移除并返回栈顶元素。int to…