我想使用表单更改另一个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>
我在哪里错了?
最佳答案
您误解了document
的含义以及文件上传的工作方式。当用户按下按钮时,确实会调用extract
函数。 (尽管没有文件时可能会按下它,但是您该怎么办?)
但是即使在函数内部,document
仍引用相同的document
,即具有<title>Changing the style of another HTML File</title>
和文件输入形式的那个。它会查找一个ID为#test
的元素,但在此document
中找不到该元素,然后失败了,因为它无法设置不存在的/ style
元素的null
属性。
您似乎想做的是:
让用户通过表单输入提供HTML文件。
将上传的文件解析为HTML。
编辑其中包含的CSS(首先解析CSS,然后对其进行编辑,然后对其进行重新编码。)
保存文件。
这些都不是简单的,它们都有其微妙之处。解析HTML很难,但是有一些库可以为您管理。 CSS也是如此。保存是另一个问题–您是否要创建供用户下载的另一个文件?您无法修改用户的文件-考虑网站是否可以简单地修改硬盘上的内容。这将是一场安全灾难。
您可能应该问自己的最重要的问题是–为什么要这样做?