分别增大和减小字体大小答案

【问题标题】：Increase and decrease size of font separately分别增大和减小字体大小
【发布时间】：2015-12-28 03:43:08
【问题描述】：

这个功能会同时减小或增大 memedotcomtop 和 memedotcomtop2 的字体大小，一旦我点击这样做。我想分别减少和增加每个的大小。更具体地说，您可以在下面的图片中看到

我有两个文本框，一个加号和一个减号按钮

当我想减小或增加第一个框中文本的大小（memedotcomtop）时，它也会减小或增加第二个框中文本的大小（memedotcomtop2）

我的代码是：

layer.add(memedotcomtop2);
layer.draw();
var textmemeheight2 = stage.getHeight();
layer.draw();


layer.add(memedotcomtop);
layer.draw();
var textmemeheight = stage.getHeight();
layer.draw();

function lowertopsize()
{
    if(memefontsize > 10 )
    {


        memefontsize = memefontsize -1;
        memedotcomtop.fontSize(memefontsize);
        layer.draw()



    }
        if(memefontsize2 > 10){


        memefontsize2 = memefontsize2 -1;
        memedotcomtop2.fontSize(memefontsize2);
        layer.draw();           



    }


}   

function increasetopsize()
{
    memefontsize2 = memefontsize2 +1;
    memedotcomtop2.fontSize(memefontsize2);

    memefontsize = memefontsize +1;
    memedotcomtop.fontSize(memefontsize);
    layer.draw();
}




 document.getElementById('meme-top-smaller').addEventListener('click', function() {
    lowertopsize();
 }, false);
 document.getElementById('meme-top-bigger').addEventListener('click', function() {
    increasetopsize();
 }, false);




 document.getElementById('meme-top-smaller2').addEventListener('click', function() {
    lowertopsize();
 }, false);
 document.getElementById('meme-top-bigger2').addEventListener('click', function() {
    increasetopsize();
 }, false);

我正在使用这个库：kinetic-v5.0.1.min.js

【问题讨论】：

创建 2 个单独的函数。或者创建 1 个带参数的函数，并使用要修改的元素作为参数调用它。
你应该发布你已经尝试过并且应该可以工作的东西，而不是不能做你想做的事情的代码。

标签： javascript kineticjs

【解决方案1】：

试试这个代码。

layer.add(memedotcomtop2);
layer.draw();
var textmemeheight2 = stage.getHeight();
layer.draw();


layer.add(memedotcomtop);
layer.draw();
var textmemeheight = stage.getHeight();
layer.draw();

function lowertopsize() {
    if (memefontsize > 10) {
        memefontsize = memefontsize - 1;
        memedotcomtop.fontSize(memefontsize);
        layer.draw()
    }       
}

function lowertopsize2() {        
    if (memefontsize2 > 10) {
        memefontsize2 = memefontsize2 - 1;
        memedotcomtop2.fontSize(memefontsize2);
        layer.draw();
    }
}

function increasetopsize() {        
    memefontsize = memefontsize + 1;
    memedotcomtop.fontSize(memefontsize);
    layer.draw();
}
function increasetopsize2() {
    memefontsize2 = memefontsize2 + 1;
    memedotcomtop2.fontSize(memefontsize2);
    layer.draw();
}

document.getElementById('meme-top-smaller').addEventListener('click', function () {
    lowertopsize();
}, false);
document.getElementById('meme-top-bigger').addEventListener('click', function () {
    increasetopsize();
}, false);

document.getElementById('meme-top-smaller2').addEventListener('click', function () {
    lowertopsize2();
}, false);
document.getElementById('meme-top-bigger2').addEventListener('click', function () {
    increasetopsize2();
}, false);

注意：

为每个操作创建单独的函数，不要将memefontsize 和memefontsize2 包含在一个函数中。

【讨论】：

我喜欢你的想法，但它只是增加或减少文本从 1 加减我点击。并忘记了 2。@John R
在上面的代码中检查最后两个addEventListener，我将lowertopsize()更改为lowertopsize2()，然后将increasetopsize()更改为increasetopsize2()。

【解决方案2】：

这是一个有效的例子。如何选择爬过 DOM 树取决于您。重要的是，您可以找到需要关注的 6 个元素中的每一个 - 4 个按钮和两个文本容器。

我还选择使用包含每一行的 TR 元素，作为跟踪当前缩放级别的简单方法，准备好响应按钮按下而增加或减少。

我的方法与您和 JohnR 所采用的方法之间的实质性区别在于，我们只有一个用于递增的函数和一个用于递减的函数。该函数在 DOM 中定位触发它的元素，然后使用此信息根据元素与原始触发按钮的相对位置来更改元素。

这提供了一些优势： 1) 您没有重复的代码，这可能会随着更改和所有副本的更新而出错。 2) 您可以在页面上使用它的元素数量不受限制 - 无需编写新的（基本相同的）事件处理程序。

<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded()
{
    // get the table
    var tbl = document.getElementById('tgtTbl');

    // get each of the row elements
    var rows = tbl.getElementsByTagName('tr');

    // and make them hold a variable that tracks their current zoom level.
    rows[0].zoomLevel = 1;
    rows[1].zoomLevel = 1;

    // get array of 4 buttons. -,+,   -,+
    var btns = document.getElementsByTagName('button');

    // and connect them to their handlers
    btns[0].addEventListener('click', onMinusBtnPressed, false);
    btns[1].addEventListener('click', onPlusBtnPressed, false);

    btns[2].addEventListener('click', onMinusBtnPressed, false);
    btns[3].addEventListener('click', onPlusBtnPressed, false);
}

function onPlusBtnPressed(evt)
{
    // determine which button triggered the event
    var btn = this;

    // determine the TD and TR elements that contain this button
    var containingCell = btn.parentNode;
    var containingRow = containingCell.parentNode;

    // grab the zoom level back from the TR element
    var curZoom = containingRow.zoomLevel;
    containingRow.zoomLevel += 0.1;

    // the text is simply contained within a TD - the first element in the row
    var targetCell = containingRow.childNodes[0];

    // update the font-size
    targetCell.setAttribute('style', 'font-size: ' + (curZoom*100) + '%');
}

function onMinusBtnPressed(evt)
{
    var btn = this;
    var containingCell = btn.parentNode;
    var containingRow = containingCell.parentNode;

    var curZoom = containingRow.zoomLevel;
    containingRow.zoomLevel -= 0.1;
    var targetCell = containingRow.childNodes[0];
    targetCell.setAttribute('style', 'font-size: ' + (curZoom*100) + '%');
}
</script>
<style>
</style>
</head>
<body>
    <div>
        <table id='tgtTbl'>
            <tr><td>Your top text</td><td><button>-</button><button>+</button></td></tr>
            <tr><td>Your bottom text</td><td><button>-</button><button>+</button></td></tr>
        </table>
    </div>
</body>
</html>

【讨论】：