jQuery之字体大小的设置方法

先获取字体大小，进行处理。

再将修改的值保存。

slice() 方法可从已有的数组中返回选定的元素。
arrayObject.slice(start,end)。
start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end   可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

jQuery代码如下：


代码如下:

<script type="text/javascript">
    $(function(){
        $("span").click(function(){
            //获取para的字体大小
            var thisEle = $("#para").css("font-size");
            //parseFloat的第二个参数表示转化的进制，10就表示转为10进制
            var textFontSize = parseFloat(thisEle , 10);
            //javascript自带方法
            var unit = thisEle.slice(-2); //获取单位
            var cName = $(this).attr("class");
            if(cName == "bigger"){
                    textFontSize += 2;
            }else if(cName == "smaller"){
                    textFontSize -= 2;
            }
            //设置para的字体大小
            $("#para").css("font-size",  textFontSize + unit );
        });
    });
  </script>

html代码如下：


代码如下:

<body>

<div class="msg">
    <div class="msg_caption">
        <span class="bigger" >放大</span>
        <span class="smaller" >缩小</span>
    </div>
    <div>
        <p id="para" >
        This is some text. This is some text. This is some text. This is some text. This
        is some text. This is some text. This is some text. This is some text. This is some
        text. This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text. This
        is some text. This is some text.
        </p>
    </div>
</div>

</body>

赞 (0)

相关推荐

  • 通过JavaScript控制字体大小的代码

    为了此代码到您的网页必须使用像素大小的字体(PX),而不是相对大小的字体,使用"EM"或"%".当然如果你使用其他字体单位的代码可以很容易地适应这些.如果脚本不能找到一个段落的字体大小,它会默认为12px.核心代码: 复制代码 代码如下: var min=8;var max=18;function increaseFontSize() {   var p = document.getElementsByTagName('p');   for(i=0;i<p.l

  • js实现动态改变字体大小代码

    在很多大网站上为了提高用户方便阅读文字,都提供有字体大小选择功能,以适应不同年龄段人群的阅读需求,其实这种功能实现起来也很简单,修改起来也方便,字体大号由你来定,默认字体大小可以CSS页面中定义,一般网页的标准字体是9pt,也就是12px: 实例代码一: <!DOCTYPE html> <html> <head> <title>修改字体大小.html</title> <meta http-equiv="keywords"

  • JavaScript 控制字体大小设置的方法

    在做公司的官网的时候,新闻内页会有一个让浏览者自己调整文字大小的功能,因此在这个空闲时间,把这个功能整理下来: function setFontSize (id,content,params){ var oTarget = document.getElementById(id), content = document.getElementById(content), size = params.size || 14, maxSize = params.maxSize || 20, step =

  • jQuery之字体大小的设置方法

    先获取字体大小,进行处理. 再将修改的值保存. slice() 方法可从已有的数组中返回选定的元素.arrayObject.slice(start,end).start 必需.规定从何处开始选取.如果是负数,那么它规定从数组尾部开始算起的位置.也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推. end   可选.规定从何处结束选取.该参数是数组片断结束处的数组下标.如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素.如果这个参数是负数,那么它规定的是从数组

  • jQuery实现字体颜色渐变效果的方法

    本文实例讲述了jQuery实现字体颜色渐变效果的方法.分享给大家供大家参考,具体如下: jQuery不允许css属性值为非数字的属性进行动画处理, 比如.animate(color:'red',500)或是.animate(fontWeight:'bold',500)都无法运行, 因此如果想实现颜色渐变的效果需要animate()外的其他方法,示例如下 方法1: <!DOCTYPE html> <html lang="en"> <head> <

  • Android Dialog 设置字体大小的具体方法

    Android Dialog 设置字体大小的具体方法

    先看下面图片: 这是我在做登录页面的时候,调用系统的ProgressDialog 进行等待,可是看起来很不协调,左边的等待图片过大,右边文字过小,看起来老别扭,虽然功能上不存在什么问题,但是我有强迫症,看不顺的就像弄掉.可是找了好久,没发现 ProgressDialog  有一个方法是可以设置字体的. 于是我又来CSDN查找解决方案,可是找了好久,翻了好几页都没看到想要的结果,心冷了,找到的都说ProgressDialog 可以自定义一个View,在layout定义一个布局,然后设置到Progr

  • Pycharm 字体大小调整设置的方法实现

    Pycharm 字体大小调整设置的方法实现

    一.pycharm字体放大的设置 File ->setting -> Keymap ->在搜寻框中输入increase ->Increase Font Size(双击) -> 在弹出的对话框中选择Add Mouse Shortcut 在弹出的对话框中同时按住ctrl键和鼠标滚轮向上滑. 二.Pycharm字体缩小的设置 File ->setting ->Keymap ->在搜寻框中输入decrease ->Decrease Font Size(双击)-

  • Flutter 透明状态栏及字体颜色的设置方法

    注:底色透明是否生效与android版本有关,版本过低设置无效 1.在main.dart内设置 void main(){ runApp(new MyApp()); if (Platform.isAndroid) { //设置Android头部的导航栏透明 SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle( statusBarColor: Colors.transparent, //全局设置透明 statusBarIc

  • 基于jquery的文章中所有图片width大小批量设置方法

    前面要加载一个jquery库. <script type="text/javascript"> var setNewsImg = function(obj){ $(obj).find('img').each(function(i){ var imgw = $(this).width(); var imgh = $(this).height(); var scale=1; if(imgw>634){ scale = 634/imgw; console.log(scale

  • IIS 7 中设置文件上传大小限制设置方法

    IIS 7 中设置文件上传大小限制设置方法

    在IIS 6.0中设置文件上传大小的方法,就是配置如下节点: 复制代码 代码如下: <system.web><httpRuntime maxRequestLength="1048576" executionTimeout="600"/>        </system.web> 但在IIS7中,设置如上设置后,不管设置多大数值,最大上传了限制为30M 还要进行如下设置才能正确: 方法1: appcmd set config &qu

  • iOS开发技巧之状态栏字体颜色的设置方法

    状态栏的字体为黑色:UIStatusBarStyleDefault 状态栏的字体为白色:UIStatusBarStyleLightContent 一.在info.plist中,将View controller-based status bar appearance设为NO 状态栏字体的颜色只由下面的属性设定,默认为白色: // default is UIStatusBarStyleDefault [UIApplication sharedApplication].statusBarStyle 解

  • Java线程池大小的设置方法实例

    目录 Java 中线程池创建的几种方式

  • python IDLE 背景以及字体大小的修改方法

    为了保护眼睛,决定把白色背景换掉: 1 首先,在已经下载好的python文件目录下,找到config-highlight.def文件,我的是在H:\python\python3**\Lib\idlelib**文件夹下. 2.打开文件后,你会看到一些默认的颜色配置,比如经典的颜色配置就是白色背景,一般这个文件中会有两种配置可供选择: [IDLE Classic]和 [IDLE New],表现在IDLE界面上就是在python shell下,选择options-configure IDLE--hig

随机推荐