使用表單更改另一個HTML文件的CSS樣式

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

您誤解了document指的是什么，以及文件上傳的工作方式。 當用戶按下按鈕時，確實會調用您的extract功能。 （盡管沒有文件時可能會按下它，但是您該怎么辦？）

但是即使在函數內部， document仍然引用同一document ，該document具有<title>Changing the style of another HTML File</title>和文件輸入形式的功能。 它會查找ID為#test的元素，該元素在本document找不到，然后失敗，因為它無法設置不存在的/ null元素的style屬性。

您似乎想做的是：

讓用戶通過表單輸入提供HTML文件。
將上傳的文件解析為HTML。
編輯其中包含的CSS（首先解析CSS，然后對其進行編輯，然后對其進行重新編碼。）
保存文件。

這些都不是簡單的，它們都有其微妙之處。 解析HTML很難，但是有些庫可以為您管理。 CSS也是如此。 保存是另一個問題–您是否要創建另一個供用戶下載的文件？ 您無法修改用戶的文件-考慮網站是否可以簡單地修改硬盤上的內容。 這將是一場安全災難。

您可能應該問自己的最重要的問題是–為什么要這樣做？

使用表單更改另一個HTML文件的CSS樣式

問題描述

1 個解決方案

解決方案1
1 已采納 2018-02-04 15:20:23

使用表單更改另一個HTML文件的CSS樣式

問題描述

1 個解決方案

解決方案1 1 已采納 2018-02-04 15:20:23

解決方案1
1 已采納 2018-02-04 15:20:23