分别增大和减小字体大小

Question

此功能同时减小或增大 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

Answer 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。

Answer 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>

分别增大和减小字体大小

Increase and decrease size of font separately

javascript

kineticjs