我有一个简单的表单，您可以在其中上传 html 文件。我有 3 个文件:
- 主 HTML 文件 - 其中包含我的表单和 JavaScript 函数。
- 辅助 HTML 文件 - 用于上传到表单。
- CSS 文件 - 用于辅助 HTML 文件。
我想在我的主 HTML 文件中使用此函数覆盖上传的 html 文件的 CSS 值:
<!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 文件具有以下代码(这将提交到表单):
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="test">This is a div</div>
</body>
</html>
这是我的辅助 HTML 文件的 CSS 文件:
#test {
background-color: red;
color: yellow;
};
但是，它不起作用。我哪里错了？
最佳答案
您正在使用输入类型=“提交”，它会重新加载页面。因此，当背景变为绿色并重新加载时，它不会显示您的样式更改。因此删除类型=“提交”。使用 input type="button. 然后在按钮中使用 onclick 函数。您可以使用以下代码:-
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="test">This is a div</div>
<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>
<script type="text/javascript">
function extract() {
var el = document.getElementById("test");
el.style.background = 'green';
el.style.color = 'red';
}
</script>
</body>
</html>
关于javascript - 我可以使用 JavaScript 函数提交表单后覆盖 CSS 值吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48597912/