Question

希望使用可点击的链接增加和减少整个网页的字体大小。我将链接放在HTML中，但是，我正在努力解决jQuery问题。

HTML

$(document).ready(function() {
  $('#linkIncrease').click(function() {
    modifyFontSize('increase');
  });
  $('#linkDecrease').click(function() {
    modifyFontSize('decrease');
  });

  function modifyFontSize(flag) {
    var divElement = $('.body');
    var currentFontSize = parseInt(divElement.css('font-size'));
    if (flag == 'increase') currentFontSize += 3;
    else if (flag == 'decrease') currentFontSize -= 3;
    else currentFontSize = 16;
    divElement.css('font-size', currentFontSize);
  }
});

* {
  margin: auto;
  padding: 0;
}

body {
  margin: auto;
  padding: 0;
  width: 100%;
  background-color: #d2eaf2;
  overflow: scroll;
  overflow-x: hidden;
  font-family: 'Century Gothic', serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> Font-Size:
  <a id="linkIncrease" href="#">Increase</a>
  <a id="linkDecrease" href="#">Decrease</a>
  <a id="linkReset" href="#">Reset</a>
</div>

非常感谢任何帮助。感到非常沮丧！

Answer 1

var FirstSize=parseInt($("body").css("font-size"),10);
$(".ChangeFont span:last-child").html(FirstSize+"px");
$(".ChangeFont a").on("click",function(){
   var ds =parseInt($(this).attr("data-size"));
   $("body").css("font-size",(ds==0?FirstSize:parseInt($("body").css("font-size"),10)+ds));
   $(".ChangeFont span:last-child").html($("body").css("font-size"));
});

body{background-color: #d2eaf2;}
.ChangeFont{display:flex}
.ChangeFont *{font-size:16px!important;}
.ChangeFont a{
padding:7px 10px 7px 10px;
margin:5px;
border:1px solid lightgray;
cursor:pointer;
user-select: none; 
 background-color: #fff;
 min-width: 15px;
 text-align: center;
 border-radius:5px;
}
.ChangeFont a:hover{background-color:#eee;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ChangeFont">
 <a data-size="1">&#10010;</a>
 <a data-size="-1">&#9866;</a>
 <a data-size="0">&#8635;</a>
 <span>Font Size: </span> <span> </span>
</div>
<p>The chart below assumes you're starting at age 22 with zero dollars invested. It also assumes a 6 percent average annual investment return and various annual salaries.
Keep in mind that the chart does not factor in inflation or salary increases.
Here's how much you would have to set aside to have $1 million by age 50 if you earn:
$40,000: 34.6 percent of your income
$60,000: 23 percent of your income
$80,000: 17.3 percent of your income
$100,000: 13.8 percent of your income
$120,000: 11.5 percent of your income
"There's no doubt that trying to save $1 million in less than 30 years on a $40,000 income is going to be a real challenge," NerdWallet's investing and retirement specialist Andrea Coombes tells CNBC Make It. "Still, the amount you can save is directly tied to how much you spend, so if you can reduce spending enough to save 35 percent of your income, more power to you."</p>

Answer 2

此setFontSize函数允许您将任意字体大小设置为任意CSS选择器

    var sheet = document.createElement('style');

    function setFontSize(selector, px) {
        sheet.innerHTML = selector + " { font-size: " + px + "px;}";
       // remove the previously-added styleSheet if present
       try {document.body.removeChild(sheet);} catch(e) {}
       document.body.appendChild(sheet);
    }

    var fontSize = 10;

    $('#linkIncrease').click(function () {
        fontSize += 3;
        setFontSize('body', fontSize);
    }
    );
    $('#linkDecrease').click(function () {
        fontSize -= 3;
        setFontSize('body', fontSize);
    }

这是一个小提琴：http://jsfiddle.net/3ora80f6/

Answer 3

如果您将单位添加到计算的大小，结果是什么？ divElement.css（＆＃39; font-size＆＃39;，＆＃39;＆＃39; + currentFontSize +＆＃39; px＆＃39;）

此外，删除＆＃39;。＆＃39;检索divElement如果它对应于一个body元素（＆＃39;。如果你的div的类是＆＃39; body＆＃39;则使用它。）

Answer 4

您的jquery选择器不匹配。你忘了调用函数进行重置......

$(document).ready(function() {
        $('#linkIncrease').click(function () {
            modifyFontSize('increase');
        }
        );
        $('#linkDecrease').click(function () {
            modifyFontSize('decrease');
        }
        );
        $('#linkReset').click(function () {
            modifyFontSize('reset');
        }
        );

            function modifyFontSize(flag) {
            var divElement=$('body');
            var currentFontSize=parseInt($("body").css('font-size'));

            if (flag=='increase')  
            currentFontSize +=3;
            else if 
            (flag=='decrease') currentFontSize -=3;        
            else  currentFontSize=16;

            divElement.css("fontSize", currentFontSize);
        }
    }
    );

这应该有效。 http://jsfiddle.net/ewn0Lnog/1/

Pericularly： divElement = $('.body');＆＃34;身体＆＃34;它不是一个班级，它是：

divElement = $('body');

使用click（）方法增加/减少网页的文字大小

4 个答案: