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 相关文章推荐
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
解决vue中修改了数据但视图无法更新的情况
Aug 27 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
微信小程序实现侧边栏分类
Oct 21 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
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
destoon二次开发入门示例
2014/06/20 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
微信小程序实现弹幕墙(祝福墙)
2020/11/18 Javascript
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
10款最好的Web开发的 Python 框架
2015/03/18 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
司机岗位职责
2013/11/15 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
贷款承诺书
2015/01/20 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
员工年度工作总结2015
2015/05/18 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
php双向队列实例讲解
2021/11/17 PHP
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript