Question

<button type="button" onClick="changeFontSize('content2', 2);">A+</button>
<button type="button" onClick="changeFontSize('content2', -2);">A-</button>

我有一个额外的文本部分需要通过此按钮进行更改。我试过这个：

<button type="button" onClick="changeFontSize('content2, middle', 2);">A+</button>
<button type="button" onClick="changeFontSize('content2, middle', -2);">A-</button>

这个

<button type="button" onClick="changeFontSize('content2', 'middle', 2);">A+</button>
<button type="button" onClick="changeFontSize('content2', 'middle', -2);">A-</button>

没有运气。

我确定这是一个简单的解决方案，但我是新手，无法解决这个问题。

这里的功能是：

<script type="text/javascript">
function changeFontSize(element, step) {
var el = document.getElementById(element);
var curFont = parseInt(window.getComputedStyle(el).fontSize, 10);
el.style.fontSize = (curFont + step) + 'px';
}
</script>

Answer 1

您可以更改changeFontSize()以接受一个元素标识符数组，而不是一个，然后循环执行每个元素标识符，执行您的功能：

function changeFontSize(elements, step) {
    var i = 0, el = undefined, curFont = 14;
    for(; i < elements.length; i ++){
        el = document.getElementById(elements[i]);
        if(el != undefined){
            curFont = parseInt(window.getComputedStyle(el).fontSize, 10);
            el.style.fontSize = (curFont + step) + 'px';
        }
    }
}

然后使用id s：

数组调用您的函数

<button type="button" onClick="changeFontSize(['content2', 'middle'], 2);">A+</button>
<button type="button" onClick="changeFontSize(['content2', 'middle'], -2);">A-</button>

JSFiddle

或者使用.querySelectorAll()可以说更容易调用，但支持度较低且is slower：

function changeFontSize(elements, step) {
    var i = 0, elements = document.querySelectorAll(elements), curFont = 14;
    for(; i < elements.length; i ++){
        if(elements[i] != undefined){
            curFont = parseInt(window.getComputedStyle(elements[i]).fontSize, 10);
            elements[i].style.fontSize = (curFont + step) + 'px';
        }
    }
}

<button type="button" onClick="changeFontSize('#content2, #middle', 2);">A+</button>
<button type="button" onClick="changeFontSize('#content2, #middle', -2);">A-</button>

JSFiddle

Answer 2

在代码changeFontSize中使用第一个参数调用document.getElementById，因此changeFontSize('content2, middle', 2);可能只会遇到JS错误，因为document.getElementById('content2, middle')会返回null。

@George给出了一个有效的答案。另一种方法是，您可以将类名指定为钩子。

<button type="button" onClick="changeFontSize('content', 2);">A+</button>
<button type="button" onClick="changeFontSize('content', -2);">A-</button>

<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>

<script type="text/javascript">
function changeFontSize(elClass, step) {
    var elements = document.querySelectorAll('.' + elClass);
    for(var i = 0; i < elements.length; i++) {
        var curFont = parseInt(window.getComputedStyle(elements[i]).fontSize, 10);
        elements[i].style.fontSize = (curFont + step) + 'px';
    }
}
</script>

当您想要添加更多容器时，这可能更加可维护。在这种情况下，您只需使用钩子类名添加容器，而不是在onclick函数调用中添加越来越多的参数。

说，你有10个div，你的HTML将是：

<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>

而不是：

<button type="button" onClick="changeFontSize(['div1', 'div2', 'div3', 'div4', 'div5', 'div6', 'div7', 'div8', 'div9', 'div10'], 2);">A+</button>
<button type="button" onClick="changeFontSize(['div1', 'div2', 'div3', 'div4', 'div5', 'div6', 'div7', 'div8', 'div9', 'div10'], -2);">A-</button>

Answer 3

以这种方式更改字体大小会容易得多。（我希望jQuery被允许，因为它被标记）

HTML：

<button type="button" id='incr'>A+</button>
<button type="button" id='decr'>A-</button>

<div id="content">Resize me</div>
<div id="content">Resize me 2</div>

JS：

function changeSize(selector, selectorsArr, incr){
 $(document).on("click", selector, function(){
    s = selectorsArr.join(', ');
    var size = $(s).css("font-size");
    $(s).css("font-size", (parseInt(size)+incr)+"px");
 });
}

var selectorsArr = ['#content', '#content2'];
changeSize('#incr', selectorsArr, 2);
changeSize('#decr', selectorsArr, -2);

JSFIDDLE

如何在此按钮上添加额外的div？

3 个答案: