转:

<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. hash_map vs unordered_map vs map vs unordered_set

    hash_map vs unordered_map 这两个的内部结构都是采用哈希表来实现.unordered_map在C++11的时候被引入标准库了,而hash_map没有,所以建议还是使用unord ...

  2. code::blocks编译多文件 没有定义的引用

    code::blocks是一款据说灰常强大的IDE,以前虽然也经常使用,但一没用过高度功能,二来没用它写过工程性的东西,简单点说就是一个以上的源文件并且加入其他非标准的头文件,今天想做一个多文件的语法 ...

  3. time_t转换为DateTime

    最近解析文华财经的日线数据. 取得的第一个字段是日期,为time_t格式(long)的. 因为是用C#来写解析程序,所以要转换为DateTime的. time_t是世界时间,要转换为本地时间,所以要加 ...

  4. java堆栈

    一.堆区: 1.存储的全部是对象,每个对象都包含一个与之对应的class的信息.(class的目的是得到操作指令) 2.jvm只有一个堆区(heap)被所有线程共享,堆中不存放基本类型和对象引用,只存 ...

  5. PHP linux spl_autoload_register区分大小写

    一个PHP脚本用到spl_autoload_register,在WINDOWS下运行正常,但在LINUX就include不了,后来发现WINDOWS大小写不敏感,而在LINUX下区分大小写,WINDO ...

  6. C# 使用微软的Visual Studio International Pack 类库提取汉字拼音首字母

    首先下载Visual Studio International Pack 1.0,官方下载地址:http://www.microsoft.com/downloads/zh-cn/details.asp ...

  7. iOS开发——UI篇OC篇&UIView/UIWindow/UIScreen/CALayer

    UIView/UIWindow/UIScreen/CALayer 1.UIScreen可以获取设备屏幕的大小. 1 2 3 4 5 6 7 // 整个屏幕的大小 {{0, 0}, {320, 480} ...

  8. MySQL 行子查询(转)

    MySQL 行子查询 行子查询是指子查询返回的结果集是一行 N 列,该子查询的结果通常是对表的某行数据进行查询而返回的结果集. 一个行子查询的例子如下: SELECT * FROM table1 WH ...

  9. as 中的反射

    flash.utils包中的getDefinitionByName,getQualifiedClassName,getQualifiedSuperclassName..可以当做反射用. 1.getDe ...

  10. javascript面向对象学习笔记——创建对象(转)

    工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o ...