1）没有名为"GetElementByClassName"的JS方法——有getElementsByClassName()或getElementById()。注意方法名称-它们区分大小写&很容易混淆。

当你想返回一个唯一的元素时，请使用"Id"（因为Id在页面上应该是唯一的，对吧？），而"elements（复数）"ByClassName则可以返回具有该特定类的每个元素——一个页面上可能有1000个元素。

2） 您还没有将"大"或"小"CSS类应用于HTML中的div。JS/jQuery查看HTML"文档对象模型"及其包含的内容。它不知道或不关心CSS文件，这似乎是你处理它的方式。在你第一次将类应用于文档中的元素之前，试图获得带有这些类名的元素不会返回任何你可以使用的东西。

您可以在HTML中对其进行硬编码，就像您在第一个div中添加class="normal"所做的那样。。。或者，您可以使用jQuery:动态添加/删除/切换类

$("#button1").click(function(){
   //play w/toggleClass() as well as chaining multiple jQuery methods
   //like .addClass() and .removeClass() to get the effect you want
   //read the jQuery documentation for examples & details.    
    $("#changeable").toggleClass(normal small); 
});

这种方法非常适合将JS、CSS和HTML分离。正如您已经注意到的那样，直接访问.style或使用.css()方法等替代方法往往会混淆问题。

3） 使用像"onclick（）"这样的内联JS处理程序很容易，但已经过时了，因为维护起来很麻烦（想象一个HTML页面上有100个按钮，然后你需要更改所有按钮…）。首选方法是使用事件侦听器。

使用jQuery，您可以使用：

$(".yourClassName").on('click', function() {//dostuff here});

或者快捷方式.click(someFunction())，它做同样的事情。

4） 你知道如何使用控制台或在像Firebug这样的检查器中设置断点来检查/调试代码中的错误吗？调查一下，这样你就可以找出你的代码在哪里被破坏，并从那里确定原因。

5） 如果您不理解JS或jQuery，请阅读文档。Mozilla开发者网络是一个很好的JS资源。jQuery文档如下：http://api.jquery.com/。如果这些都没有意义（一开始不会），网上有很多教程可以帮助解释——Lynda.com、Treehouse、tuts+等。在请别人帮你做作业后复制/粘贴不会教你什么。如果这是你真正想学的东西，试着去理解事情是如何运作的；为什么——不仅仅是做什么。祝你好运！

您的代码中有几个问题。

1. 要调用的函数是document.getElementsByClassName()，而不是GetElementsByClassName
2. 它返回一个集合，而不是单个元素。要更改集合中的所有元素，需要编写一个循环
3. normal.style,.fontsize中多了一个逗号

由于您使用的是jQuery，因此可以简化它，因为它会自动为您迭代。

$(document).ready(function() {
    $("#button1").click(function() {
        var change = $("#changeable");
        if (change.hasClass("small")) {
            change.toggleClass("small normal");
        } else if (change.hasClass("normal")) {
            change.toggleClass("normal large");
        }
    });
    $("#button2").click(function() {
        var change = $("#changeable");
        if (change.hasClass("large")) {
            change.toggleClass("large normal");
        } else if (change.hasClass("normal")) {
            change.toggleClass("normal small");
        }
    });
});

如果您使用jQuery，您可以添加一个.click（function（e）{}）监听器，并使用它来更改某个元素内文本的大小。如

<div id='textDiv'> <p> Just some text </p> </div>
<button id='textSmallerButton'>smaller text</button>
<script type='text/javascript'>
   $("#textSmallerButton").click(function(e) {
       $("#textDiv").css("font-size", "12px");
   });
</script>

（较大的字体基本相同，只是其他大小的字体）只需记住正确设置ID：）

我希望这将帮助您：）

您可以更改对象的类；

function button1Click(){
    $(this).removeClass("normal small").addClass("large");
}
function button2Click(){
    $(this).removeClass("normal large").addClass("small");
}

第一件事：

在HMTL中的=符号周围添加空格并不常见，虽然在技术上没有错，但它在每行上都使用了大量空间，而且很难阅读，因为它很难看到每个属性的开头：

<div class = "something" id = "other">
<div class="something" id="other">

此外，这势必会极大地惹恼未来的大学。

由于我们使用的是jQuery，因此很容易消除令人讨厌的内联属性处理程序。我们可以把它们留在90年代它们的归属地。

<input type="button" id="button1" value="Enlarge"></input>
<input type="button" id="button2" value="Shrink"></input>

将我们的HTML和Javascript分开是一件非常好的事情，因为它使我们的HTML不那么混乱。

jQuery允许我们使用CSS选择器来选择元素，这样我们就可以将处理程序绑定到它们。CCD_ 12表示id。CCD_。

$('#button1'); // jQuery Gimme an element with the ID of 'button1' if you please 
$('.icecream'); // all elements with the class 'icecream'
$('.icecream.vanilla'); // with the class 'icecream' and 'vanilla'

jQuery将这些CSS选择器表达式转换为对内置document.querySelectorAll、document.getElementById。。。功能。这里的神奇之处在于，我们真的不需要担心旧的浏览器可能不包括臭名昭著的DOMapi的某些部分——jQuery会为我们处理它（至少希望如此）。

因此，让我们一行一行地研究我们将如何为缩小和放大按钮添加功能：

// Run this when the page is fully loaded and ready
$(function(){
    // We get the element with the Id changeable
    var $changeable = $("#changeable");
    // lets create an event handler for the enlarge button
    $("#button1").click(function(){
        // we check if changeable is small and save the value so 
        // we remember what state our text has even if we reset it
        var isSmall = $changeable.hasClass('small');
        // lets reset everything just to be sure
        $changeable.removeClass('small normal large');
        // This lets us "step" up to normal size if the text is small 
        // instead of going directly from small to large
        if (isSmall) {
            $changeable.addClass('normal');
        } else {
            $changeable.addClass('large');
        }
    });
    // Event handler for the shrink button - the same as enlarge but opposite 
    $("#button2").click(function(){
        var isLarge = $changeable.hasClass('large');
        $changeable.removeClass('small normal large');
        if (isLarge) {
            $changeable.addClass('normal');
        } else {
            $changeable.addClass('small');
        }
    });
}); 

您可以在这个jsFiddle中试用它，并看到测试证明它可以像我们预期的那样工作：http://jsfiddle.net/maxcal/d1rydapr/6/.

您可以使用"css"属性。

例如：

$("#changeable").css({"font-size":"12px"});