分别增加和减少字体大小

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);

我正在使用此库：dynamic-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>

分别增加和减少字体大小

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-12-28 04:15:27

解决方案2
0 2015-12-28 04:21:18

分别增加和减少字体大小

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-12-28 04:15:27

解决方案2 0 2015-12-28 04:21:18

解决方案1
1 已采纳 2015-12-28 04:15:27

解决方案2
0 2015-12-28 04:21:18