个人中心
gpt4 book ai didi

javascript - 如何使用 JavaScript 更改段落的字体大小

转载 作者：行者123 更新时间：2023-11-28 20:34:53 25 4
gpt4 key购买 nike

我正在学习 JavaScript，并且正在尝试更改网站中带有 3 个按钮的段落的字体大小。当我编写代码时，控制台输出此错误，但我不知道它是什么。我还想知道我编码的方式是否正确？

html代码:

<!DOCTYPE html>
<html leng="es">
    <head>
        <meta charset="UTF-8">
        <title>Mi ejercicio DHTML</title>
        <link rel="stylesheet" type="text/css" href="css/estilos.css">
        <script type="text/javascript" src="js/codigo.js"></script>
    </head>
    <body>
        <p id="parrafo">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.
        </p>
        <span class="boton" id="boton1">Fuente pequeña</span>
        <span class="boton" id="boton2">Fuente mediana</span>
        <span class="boton" id="boton3">Fuente grande</span>
    </body>
</html>

CSS:

p {
    font-size: 13px;
    margin-bottom: 2em;
}
.boton {
    background: red;
    padding: .5em 1em;
}

JavaScript:

window.addEventListener('load', inicio, false);

function inicio() {
    var indice = [1, 2, 3];
    for (var i = 0; i < indice.length; i++) {
        var boton = document.getElementById('boton' + indice[i]);
        boton.addEventListener('click', cambiarFuente, false);
    };
}

function cambiarFuente() {
    console.log('hola');
}

最后出现错误:

Uncaught TypeError: Cannot call method 'addEventListener' of null codigo.js:6

我放置了 <script>之前的标签 </body>现在它可以工作了；至少我是这么认为的。出现了另一个问题，该段落没有改变其字体大小，但我仍然收到控制台日志消息，就好像它正在工作一样:

window.addEventListener('load', inicio, false);

function inicio(){
var indice =[1,2,3];
for (var i = 0; i < indice.length; i++) {
    var boton = document.getElementById('boton' + indice[i]);
    boton.addEventListener('click', cambiarFuente, false);
};

function cambiarFuente(){
    var parrafo = document.getElementById('parrafo');
    parrafo.style.fontSize=20;
    console.log('hola');
}
}

我也不知道如何为每个按钮分配不同的字体大小!有人能给我建议吗？

最佳答案

当 document.getElementById 返回 null 时，表示未找到具有所提供 ID 的元素。在这种情况下，这是因为您的脚本在页面加载之前运行。

在加载事件后调用该函数:

window.onload = function() {
   // stuff to run onload
};

一个额外的预防措施是在尝试调用方法之前检查 getElementById 是否返回一个元素(或至少返回 null 以外的元素)。

编辑

此外，正如 Mahesh Sapkal 所指出的，小于 8(也许是 9？)的 IE 不支持 addEventListener，您必须使用 attachEvent。有许多“addEvent”函数根据特征检测使用其中之一，这里是一个简单的函数:

  function addListener(element, event, fn) {

    // Use addEventListener if available
    if (element.addEventListener) {
      element.addEventListener(event, fn, false);

    // Otherwise use attachEvent, set this and event
    } else if (element.attachEvent) {
      element.attachEvent('on' + event, (function (el) {
        return function() {
          fn.call(el, window.event);
        };
      }(element)));

      // Break closure and primary circular reference to element
      element = null;
    }
  }

循环变成:

var boton;

for (var i = 0; i < indice.length; i++) {
    boton = document.getElementById('boton' + indice[i]);

    if (boton) {
          addListener(boton, 'click', cambiarFuente);
    }
}

请注意，if block 后面没有分号，它不是语句(尽管它通常包含语句)。

关于javascript - 如何使用 JavaScript 更改段落的字体大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15628944/

25 4 0
文章推荐： python - 如何根据 x,y 值推断函数？
文章推荐： java - 为什么 Jacoco 将我的 for 循环标记为部分覆盖？
文章推荐： scala - 在 Scala 中为解析器组合器创建测试
文章推荐： javascript - 为什么我的 JavaScript if 语句不起作用？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com