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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
javascript 自动转到命名锚记
Jan 10 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
JS判断数组那点事
Oct 10 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 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堆栈与列队的学习
2013/06/21 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
Python 专题四 文件基础知识
2017/03/20 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python实现电子产品商店
2019/02/26 Python
python实现小球弹跳效果
2019/05/10 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
Python 实现微信自动回复的方法
2020/09/11 Python
python 简单的调用有道翻译
2020/11/25 Python
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
总监职责范文
2013/11/09 职场文书
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
个人委托书范本
2014/04/02 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
安全责任书模板
2014/07/22 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
年会主持人开场白台词
2015/05/29 职场文书
2015暑假打工实践报告
2015/07/13 职场文书