Javascript 如何向该按钮添加额外的div？ A+ A-

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

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

A+
A-

还有这个

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

A+
A-

没有任何运气

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

下面是函数：

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

函数changeFontSize（元素、步骤）{
var el=document.getElementById（元素）；
var curFont=parseInt（window.getComputedStyle（el.fontSize，10）；
el.style.fontSize=（curFont+step）+“px”；
}

您可以更改

changeFontSize（）

以接受元素标识符数组，而不是一个，然后在每个元素标识符之间循环，执行您的功能：

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

---

或者使用

.querySelectorAll（）

，这可能更容易调用，但支持较少，并且：

函数changeFontSize（元素、步骤）{
var i=0，elements=document.queryselectoral（elements），curFont=14；
对于（；i

A+
A-

---

您可以更改

changeFontSize（）

以接受元素标识符数组，而不是一个，然后在每个元素标识符之间循环，执行您的功能：

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

---

或者使用

.querySelectorAll（）

，这可能更容易调用，但支持较少，并且：

函数changeFontSize（元素、步骤）{
var i=0，elements=document.queryselectoral（elements），curFont=14；
对于（；i

A+
A-

---

在您的代码中

changeFontSize

调用

文档。getElementById

带有第一个参数，因此

changeFontSize（'content2，middle'，2）

可能会遇到JS错误，因为

document.getElementById（'content2，middle'）

返回

null

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

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

A+
A-
1.
2.
3.
函数changeFontSize（类，步长）{
var元素=document.querySelectorAll（'.'+elClass）；
对于（var i=0；i

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

假设您有10个div，您的HTML将是：

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

1
2.
3.
4.
5.
6.
7.
8.
9
10

而不是：

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

A+
A-

在您的代码中

changeFontSize

调用

document.getElementById

和第一个参数，因此

changeFontSize（'content2，middle'，2）

可能会遇到JS错误，因为

document.getElementById（'content2，middle'）

返回

null

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

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

A+
A-
1.
2.
3.
函数changeFontSize（类，步长）{
var元素=document.querySelectorAll（'.'+elClass）；
对于（var i=0；i

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

假设您有10个div，您的HTML将是：

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

1
2.
3.
4.
5.
6.
7.
8.
9
10

而不是：

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

A+
A-

这样更改字体大小会容易得多。（我希望jQuery是允许的，因为它被标记了）

HTML:

---

这样更改字体大小会容易得多。（我希望jQuery是允许的，因为它被标记了）

HTML:

---

changeFontSize

是一个函数，您可以共享该代码吗？正如Sinan Samet非常正确地指出的，您已经标记了jQuery。但是，您的代码没有显示它的迹象。你有空吗？对不起，那是个错误。我想标记Javascript。顺便说一句，谢谢你，工作得很有魅力。@Jurdun好的，没问题，谢谢你帮我解决这个问题。很高兴能提供帮助。

changeFontSize

是一个函数，您可以共享该代码吗？正如Sinan Samet非常正确地指出的，您已经标记了jQuery。但是，您的代码没有显示它的迹象。你有空吗？对不起，那是个错误。我想标记Javascript。顺便说一句，谢谢你，工作得很有魅力。@Jurdun好的，没问题，谢谢你帮我解决这个问题。很高兴能提供帮助。第2行，

这实际上是
窗口。第4行，
这是单击的按钮。你确定询问者要更改按钮吗？他已经可以调整大小了。现在他想控制更多的集装箱。。。请再读一遍问题。啊，好的，抱歉。编辑了第2行，
这实际上是
窗口。第4行，
这是单击的按钮。你确定询问者要更改按钮吗？他已经可以调整大小了。现在他想控制更多的集装箱。。。请再读一遍问题。啊，好的，抱歉。编辑它
<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>

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