转:

<script type="text/javascript">
$(document).ready(function() {
        $("#fontsize").change(function(){
                var size = $("#fontsize").val();//获取下拉框的值
                $("p").css({"font-size":size }); //把值付给css的font-size
        });
        $("#backgroundcolor").change(function(){
                var backgroundcolor = $("#backgroundcolor").val();
                $("p").css({"background":backgroundcolor});
        });
        $("#fontcolor").change(function(){
                var fontcolor = $("#fontcolor").val();
                $("p").css({"color":fontcolor});
        });
});

</script>
        <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>

jquery之css()改变字体大小,颜色,背景色的更多相关文章

  1. win32程序如何改变字体大小颜色

    //设定文字大小和颜色 LOGFONT logfont; //改变输出字体 ZeroMemory(&logfont, sizeof(LOGFONT)); logfont.lfCharSet = ...

  2. 利用NSMutableAttributedString实现label上字体大小颜色行间距的改变

    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.si ...

  3. 改变字体大小实现自适应之js方案A

    一.元素大小有两种写法 1.写结果:设计师给的移动端页面sketch设计稿一般是750px宽度,在sublime编辑器里,设置cssrem或rem-unit插件为56px的字体大小.做页面时,设计稿是 ...

  4. CSS改变插入光标颜色caret-color简介及其它变色方法(转)

    一.CSS改变输入框光标颜色的原生属性caret-color CSS caret-color属性可以改变输入框插入光标的颜色,同时又不改变输入框里面的内容的颜色. 例如: input { color: ...

  5. pycharm设置用滑轮改变字体大小

    在电脑第一次安装pycharm之后,发现每次调整代码界面的字体,总是需要到setting里面调整,这样非常不方便,特别是对于代码量很多的时候,我们有时候需要把目光聚焦到某一句代码,这个时候就需要放大, ...

  6. rem布局和使用js rem动态改变字体大小,自适应

    解决rem文字动态改变字体大小: <script> console.log(window.devicePixelRatio); var iScale = 1; iScale = iScal ...

  7. css改变svg的颜色

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Eclipse 改变字体大小,设置背景色

    Eclipse背景颜色修改: 操作界面默认颜色为白色.对于我们长期使用电脑编程的人来说,白色很刺激我们的眼睛,所以我经常会改变workspace的背景色,使眼睛舒服一些.设置方法如下: 1.打开win ...

  9. CSS改变字体下划线颜色

    下图是网页中一个非常普通的列表. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQXVndXMzMzQ0/font/5a6L5L2T/fontsize/40 ...

随机推荐

  1. android 脸部抠图

    原帖:http://www.eoeandroid.com/thread-205445-1-1.html package com.face; import android.app.Activity; i ...

  2. ecshop支持手机号码登录、邮箱登录

    修改 User.php  文件找到: if ($user->login($username, $password,isset($_POST['remember']))) 在它上边增加一段我们所要 ...

  3. 让div变得大方美观 bootstrap

    <div class="panel panel-default "> <div class="panel-heading"> <h ...

  4. 深入了解 Dojo 的服务器推送技术

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  5. cocos2d-x 让精灵按照自己设定的运动轨迹行动

    转自:http://blog.csdn.net/ufolr/article/details/7447773 在cocos2d中,系统提供了CCMove.CCJump.CCBezier(贝塞尔曲线)等让 ...

  6. PostgreSQL的 initdb 源代码分析之二

    继续分析 下面这一段,当 initdb --version 或者  initdb --help 才有意义. ) { ], || strcmp(argv[], ) { usage(progname); ...

  7. Codeforces Gym 100733J Summer Wars 线段树,区间更新,区间求最大值,离散化,区间求并

    Summer WarsTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view.a ...

  8. mac 环境下mysql 不能删除schema问题的解决办法

    首先说明下问题环境,我是在mac机器上安装的mysql+workbench. 在删除一个数据库的时候,出现error dropping database cant rmdir ./test 的问题. ...

  9. [Angular 2] Factory Provider

    In this lesson, we discuss how and when to use factory providers, to enable dependencies that should ...

  10. iOS开发——实用篇&提高iOS开发效率的方法和工具

    提高iOS开发效率的方法和工具 介绍 这篇文章主要是介绍一下我在iOS开发中使用到的一些可以提升开发效率的方法和工具. IDE 首先要说的肯定是IDE了,说到IDE,Xcode不能跑,当然你也可能同时 ...