jquery实现实时改变网页字体大小、字体背景色和颜色的方法


Posted in Javascript onAugust 05, 2015

本文实例讲述了jquery实现实时改变网页字体大小、字体背景色和颜色的方法。分享给大家供大家参考。具体如下:

这里使用jquery实时改变字体大小、字体背景色和颜色,JQUERY让很多事变得更简单,确实是个实用的小插件,对JQ不熟悉的朋友,平时可要多看一些实例啦,比如现在这一个小实例,你可以从中学习到不少知识点的哦。

运行效果如下图所示:

jquery实现实时改变网页字体大小、字体背景色和颜色的方法

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#fontsize").change(
  function()
  {
   $("p").css({fontSize:this.value});//dom
  }
  )
  // change the font color
  $("#backgroundcolor").change(
  function()
  {
   $("p").css({background:this.value});
  }
  )
  // change the background color
  $("#fontcolor").change(
  function()
  {
   $("p").css({color:this.value});
  }
  )
});
</script>
</head>
<body>
<div id="formstylecontrols">
  <label for="fontsize">字体大小</label>
  <select id="fontsize">
    <option value="12px">小号</option>
    <option value="14px">较小</option>
    <option value="16px" >中号</option>
    <option value="18px">较大</option>
    <option value="24px">大号</option>
  </select>
  <label for="backgroundbackground">背景颜色</label>
  <select id="backgroundcolor">
    <option value="#F4FBFF">默认</option>
    <option value="gray">淡灰</option>
    <option value="red">红色</option>
    <option value="green">绿色</option>
  <option value="yellow">明黄</option>
  </select>
  <label for="fontcolor">字体颜色</label>
  <select id="fontcolor">
    <option value="#000000">黑色</option>
    <option value="#ff0000">红色</option>
    <option value="#006600">绿色</option>
    <option value="#0000ff">蓝色</option>
  <option value="#660000">棕色</option>
  </select>
  <label>
 <input type="submit" id="style" value="保存设置" />
 </label>
</div>
<p>三月初三,春日晴朗</p>
<p>浩浩荡荡的迎亲队伍,转过金陵城的主要街道,再把出尽风头的新皇后冯妙芝送到皇帝选定的洞房柔光殿。贺喜的大臣、亲友已经纷纷告退了,很快,帝后就要携手进入洞房,共度春宵了……</p>
<p>此时此刻,我站在这片泾水和渭水之间的大牧场上,脚下是三块古旧的巨大的石板铺就的小小广场,前面的松柏葱翠里是一座冷冷的尼庵,那就是曾经宠爱过我的君王给我的最后的归宿。</p>
</body>
</script>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
jQuery select的操作实现代码
May 06 Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
JavaScript节点及列表操作实例小结
Aug 05 #Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 #Javascript
coffeescript使用的方式汇总
Aug 05 #Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 #Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 #Javascript
js如何实现点击标签文字,文字在文本框出现
Aug 05 #Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 #Javascript
You might like
php中将网址转换为超链接的函数
2011/09/02 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
php对数组排序的简单实例
2013/12/25 PHP
php中hashtable实现示例分享
2014/02/13 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
python 实现超级玛丽游戏
2020/11/25 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
2014年五四青年节活动方案
2014/03/29 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
英文导游词
2015/02/13 职场文书
入门学习Go的基本语法
2021/07/07 Golang