Question

我想使用表单更改另一个HTML文件的CSS样式。这是我到目前为止所获得的，但代码并没有工作，因为它不会改变上传的HTML文件的样式。

这是我的主要代码：

 <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Changing the style of another HTML File</title>

    <script type="text/javascript">
    function updateSize() {
      var nBytes = 0,
          oFiles = document.getElementById("uploadInput").files,
          nFiles = oFiles.length;
      for (var nFileId = 0; nFileId < nFiles; nFileId++) {
        nBytes += oFiles[nFileId].size;
      }
      var sOutput = nBytes + " bytes";
      // optional code for multiples approximation
      for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
        sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
      }
      // end of optional code
      document.getElementById("fileNum").innerHTML = nFiles;
      document.getElementById("fileSize").innerHTML = sOutput;
    }

    function extract() {
    var el = document.getElementById("test");
    el.style.background = 'green';
    el.style.color = 'red';
    }
    </script>

    <body onload="updateSize();">
    <form>
    <p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
    <p><input type="button" value="Submit" onclick="extract()"></p>
    </form>
    </body>
    </html>

正在上传的文件：

<html>
<head>

<style>
#test {
background-color: blue;
color: yellow;
};
</style>
</head>

<body> 
<div id="test">This is a div</div>
</body> 

</html>

我在哪里错了？

Answer 1

您误解了print(' '.join(str(i) for i in a if a.count(i) == 1), end='')所指的内容，以及文件上传的工作原理。当用户按下按钮时，确实调用了document函数。（虽然可以在没有文件时按下，但是你做了什么？）

但即使在函数内部，extract仍然引用相同的document，document和文件输入形式。它会查找标识为<title>Changing the style of another HTML File</title>但在此#test中找不到的元素，然后失败，因为它无法设置不存在的document属性/ style元件。

您似乎希望做的事情是：

让用户通过表单输入提供HTML文件。
将上传的文件解析为HTML。
编辑其中包含的CSS（首先解析CSS，然后编辑它，然后重新编码。）
保存文件。

这些都不简单，它们都有其微妙之处。解析HTML很难，但有些库可以为您管理。同样适用于CSS。保存是另一个问题 - 您是否要创建另一个用户可以下载的文件？您无法修改用户的文件 - 请考虑网站是否可以简单地修改硬盘的内容。这将是一场安全灾难。

也许您应该问自己最重要的问题是 - 为什么要这样做？

使用表单更改另一个HTML文件的CSS样式

1 个答案: