Question

我已经在这里经历了几个类似的问题，但由于我相对较新的JavaScript和全新的JQuery，我真的不知道我在做什么：D

所以我的任务是制作两个包含文字的div：

<div id = "changeable" class = "normal">
    <p>Blah blah blah blah blah blah blah</p>
</div>
<div id = "staysSame">
    <p>Bloo bloo bloo bloo bloo bloo bloo bloo bloo</p>
</div>

然后我应该使用事件处理程序创建两个按钮，使用JQuery / JavaScript / CSS更改字体大小

<input type = "button" onclick = "button1Click()" id = "button1" value = "Enlarge"></input>
<input type = "button" onclick = "button2Click()" id = "button2" value = "Shrink"></input>

我应该为每种字体大小制作一个CSS页面（这正是我需要的，除了确切的字体大小）

.large{
    font-size: 20pt;
}
.normal{
    font-size: 14pt;
}
.small{
    font-size: 10pt;
}

由于我是JQuery的新手，我不知道如何在大多数情况下使用它。所以现在我只是有一些不起作用的JavaScript。这并不奇怪，因为我不太了解JS或者wooooo

var large = GetElementByClassName("large");
var normal = GetElementByClassName("normal");
var small = GetElementByClassName("small");

function button1Click(){
    normal.style.fontsize = large.style.fontsize;
}
function button2Click(){
    normal.style,.fontsize = small.style.fontsize;
}

感谢所有帮助表示赞赏！

Answer 1

您的代码中存在多个问题。

要调用的函数是document.getElementsByClassName()，而不是GetElementsByClassName。
它返回一个集合，而不是单个元素。要更改集合中的所有元素，您需要编写一个循环。
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");
        }
    });
});

Answer 2

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

当你想要返回一个唯一元素时使用“Id”（因为ID在页面上应该是唯一的，对吗？），并且“elements（复数）”ByClassName返回具有该特定类的每个元素 - 可能是页面上的1000件事。

2）您尚未在HTML中将“大”或“小”CSS类应用于div。 JS / jQuery查看HTML“文档对象模型”及其包含的内容。它不知道或不关心CSS文件，这似乎是你接近它的方式。在首次将类应用于文档中的元素之前，尝试获取具有这些类名的元素将不会返回任何可以使用的内容。

您可以在HTML中对此进行硬编码，就像您通过将class="normal"添加到第1个div一样...或者您可以动态添加/删除/切换类with jQuery: < / p>

$("#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 Developer Network是一个很好的JS资源。 jQuery文档在这里：http://api.jquery.com/。如果那些没有意义（他们一开始不会），有大量的在线教程可以帮助解释它 - Lynda.com，树屋，tuts +等。复制/粘贴后请求别人为你做功课不会教你很多东西。如果这是你真正想要学习的东西，试着去理解它是如何运作的。为什么 - 不仅仅是做什么。祝好运！

Answer 3

如果您使用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>

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

我希望这会对你有所帮助:)。

Answer 4

您可以更改对象的类;

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

Answer 5

首先要做的事情：

在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 selectors，它们非常简洁，非常棒，可以选择元素，以便我们可以将处理程序绑定到它们。 #表示id。 .表示一个班级。

$('#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 ...函数的调用。这里的神奇之处在于我们并不需要关心旧浏览器可能不包含臭名昭着的DOM api的某些部分 - 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/。

Answer 6

您可以使用“css”属性。

例如：

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

Jquery制作放大和缩小文字的按钮

6 个答案: