转:

<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. lib 和 dll 的区别、生成以及使用详解

    首先介绍一下静态库(静态链接库).动态库(动态链接库)的概念,首先两者都是代码共享的方式. 静态库:在链接步骤中,连接器将从库文件取得所需的代码,复制到生成的可执行文件中,这种库称为静态库,其特点是可 ...

  2. 利用WPF创建含多种交互特性的无边框窗体

    咳咳,标题一口气读下来确实有点累,让我先解释一下.另外文章底部有演示程序的下载. 本文介绍利用WPF创建一个含有以下特性的窗口: 有窗口阴影,比如QQ窗口外围只有几像素的阴影: 支持透明且无边框,为了 ...

  3. fixed 定位 苹果手机输入框触发时内容全部隐藏

    问题出现在东钿微信公众号用户注册页面 页面中只有两个输入框 页面没有超过一屏,悬浮按钮也要出现在本页面 ,开始布局页面的时候没什么问题,然后我在我自己手机上测试 ,输入手机号码,非常奇怪的问题出现了, ...

  4. 调用DEDE日期时间格式整理大全

    dedecms 日期时间格式大全,大家可以根据需要选择.DEDECMS利用strftime()函数格式化时间的所有参数详解,包括年份日期进制.小时格式等,大家收藏吧,呵. 日期时间格式 (利用strf ...

  5. 剑指OFFER之二进制中1的个数(九度OJ1513)

    题目描述: 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 输入: 输入可能包含多个测试样例.对于每个输入文件,第一行输入一个整数T,代表测试样例的数量.对于每个测试样例输入为一个整 ...

  6. python常用字符串操作

    #!/usr/bin/env python name='cunzhang' print(name.capitalize())#首字母大写 print(name.count('n'))#统计字符有几个 ...

  7. [刷题codeforces]651B/651A

    651B Beautiful Paintings 651A Joysticks 点击可查看原题 651B是一个排序题,只不过多了一步去重然后记录个数.每次筛一层,直到全为0.从这个题里学到一个正确姿势 ...

  8. php error file_get_contents()

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

  9. 图片攻击-BMP图片中注入恶意JS代码 <转载>

    昨天看到一篇文章<hacking throung images>,里面介绍了如何在BMP格式的图片里注入JS代码,使得BMP图片既可以正常显示, 也可以运行其中的JS代码,觉得相当有趣. ...

  10. 也谈读书和书籍选择问题(C#)

    前言 读到一篇.net程序员应该看什么书?深有感触.以前曾经用C#也开发过几年的东西.在那里对相关语言和开发都有了一定的了解.这里,结合自己当初的一些体会和见识把一些比较好的书籍也和大家分享一下.这一 ...