Question

我在这里有一个jsFiddle - http://jsfiddle.net/pbkt3nrx/1/ - 我希望每次点击“Shrink”按钮时将html元素的字体大小减少5％。但第一次单击会将字体大小从62.5％（10px）缩小到5px。有没有办法做到这一点？

由于

$(function(){   
    $('button#shrink').mousedown(function() {
            $('html').css('font-size', '-=5%');
      });
});

Answer 1

你的代码也是正确的。你当前的大小是10像素而你减少了5像素。这就是它在第二次点击后消失的原因。

试试这个：将尺寸减小1px

$(function(){   
    $('button#shrink').mousedown(function() {
        curSize= parseInt($('html').css('font-size')) -1; 
        //here parseInt will remove px from 10px ,final value would be only 10
        $('html').css('font-size', curSize);
                       });
});

http://jsfiddle.net/pbkt3nrx/2/

Answer 2

试试这个

$(function(){   
    $('button#shrink').mousedown(function() {
            font = parseInt($("html").css("font-size"));   //Get current font-size
            font = font-1;  //Decrease font-size by 1
            $('html').css('font-size', font);  //Apply new font-size to current font-size
        });
});

<强> JSFiddle

Answer 3

这应该有效http://jsfiddle.net/pbkt3nrx/5/

$(function () {
var shrinks = 0;
$('button#shrink').mousedown(function () {
    var currentHeight = $('html').css('font-size');
    currentHeight = currentHeight.substring(0,currentHeight.length-2);
    shrinks++;
    console.log(currentHeight);
    $('html').css('font-size', +62.5-5*shrinks + '%');
});
});

如何使用.css（）减小字体大小百分比

3 个答案: