Question

我正在尝试使用“ program1.js”更改html代码中标头和正文内容的字体，但是它不起作用。我试图更改字体，并向我的信息中添加一些数据，例如姓名，地址，工作以及我的一张照片。任何帮助将不胜感激。

html代码“ aboutme.html”

import pandas as pd

ImportError: No module named pandas

和program1.js代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>About Me</title>
</head>
<body>
  <script src="program1.js"></script>
  <h1 id="myP">About Me</h1>
  <ul>
    <li>Name:<span id="name"></span></li>
    <li>Occupation:<span id="occupation"></span></li>
    <li>Address:<span id="address"></span></li>
  </ul>
</body>
</html>

Answer 1

您将收到语法错误。请从您的program1.js中删除<img id="myImg" src="myimage.jpg" alt="The Pulpit Rock" width="304" height="228">。

Answer 2

假设program1.js是一个单独的文件，并且与aboutme.html在同一目录中，则需要在您的头部添加脚本标签，如下所示：

<script type="text/javascript" src="program1.js"></script>

否则，如果您的program1.js在另一个文件夹中，请使用：

<script type="text/javascript" src="./path/to/program1.js"></script>

此外，您的脚本中还有一个额外的<img>，这会导致脚本出错，但是我认为它不会干扰网页样式的设置：{{ 3}} 但是，这是基于经验的，但并非总是如此。

Answer 3

如您的注释中所述，请从JS中删除img，因为它是HTML而不是JavaScript。然后，除非计划使用准备就绪的文档侦听器，否则应在body标签的末尾添加应用程序样式，以便在JS尝试访问它们（并应用样式）时已加载每个节点。

JavaScript是一种运行时语言，这意味着，如果您尝试在垂直行层次结构中读取节点之前（即，在JS代码下方）访问节点，则默认情况下它们将无权访问卸载的方面。

Answer 4

改为使用此

aboutme.html：

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8"/>
        <title>About Me</title>
      </head>
      <body>
        <script src="program1.js"></script>
         <h1 id="myP">About Me</h1>
         <ul>
           <li>Name:<span id="name"></span></li>
           <li>Occupation:<span id="occupation"></span></li>
           <li>Address:<span id="address"></span></li>
         </ul>
      </body>
    </html>

program1.js：

document.getElementById("myP").style.fontFamily = "Impact,Charcoal,sans-serif";
document.getElementById('name').innerHTML = 'Kiarash'; 
document.getElementById('occupation').innerHTML = 'SQL DBA';
document.getElementById('address').innerHTML = '201 s 4th';

Answer 5

尝试一下：

    document.getElementById("myP").style.fontFamily = "Impact,Charcoal,sans-serif";
    document.getElementById('name').innerHTML = 'Kiarash'; 
    document.getElementById('occupation').innerHTML = 'SQL DBA';
    document.getElementById('address').innerHTML = '201 s 4th';
    document.getElementById('myImg').src = "https://androidzone.org/wp-content/uploads/2012/11/logo-android2-720x540.jpg";

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8"/>
      <title>About Me</title>
    </head>
    <body>
      <script src="program1.js"></script>
      <h1 id="myP">About Me</h1>
      <ul>
        <li>Name:<span id="name"></span></li>
        <li>Occupation:<span id="occupation"></span></li>
        <li>Address:<span id="address"></span></li>
        <img id="myImg" src="" alt="The Pulpit Rock" width="304" height="228" />
      </ul>
    </body>
    </html>

Answer 6

在删除program1.js文件中的img标记后，JavaScript文件才起作用。

链接的JavaScript不会更改html正文字体

6 个答案: