如何将 HTML/CSS 的形式更改为 JSON？答案

【问题标题】：How can I change the form of HTML/CSS to JSON?如何将 HTML/CSS 的形式更改为 JSON？
【发布时间】：2018-10-04 05:28:44
【问题描述】：

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
background-color: #004c97;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
font-family: Arial;
}

.active, .collapsible:hover {
background-color: #FFC61E;
}

.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
font-family: Arial;
}
</style>
</head>

<body>

<h1>User_Testing1</h1>
<button class="collapsible">This is the first tab</button>
<div class="content">
<p>This is the sub-category of the first tab.</p>
</div>
<button class="collapsible">This is the second tab</button>
<div class="content">
<p>This is the sub-category of the second tab.</p>
</div>
<button class="collapsible">This is the third tab</button>
<div class="content">
<p>This is the sub-category of the third tab.</p>
</div>

<button class="collapsible">This is the fourth tab</button>
<div class="content">
<p>This is the sub-category of the fourth tab,</p>
</div>

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>

</body>
</html>

你好！我是 JSON/HTML 编程的新手。我使用 HTML/CSS 创建了这个 HTML 网页，但我希望将以下代码转换为 JSON。我在 YouTube/Udemy 上观看了几个视频并阅读了有关该主题的几篇文章，但我发现的唯一内容是在 HTML/JSON 中创建表格。请在这件事上帮助我。我真的很感谢你的努力。谢谢

【问题讨论】：

出于什么目的？ HTML 和 JSON 是完全不同的东西。
@Blazemonger 在网页上发布。
HTML 是一种用于描述网页内容的语言。 CSS 是一种用于描述如何显示 HTML 文档的语言（它也适用于其他语言）。 JSON 是一种简单的数据格式，用于描述数组、对象、数字、字符串和其他一些基本数据类型。它们不能远程互换。在 JSON 中没有标准的方式来表达 HTML 或 CSS。如果要将数据存储在 JSON 中，则必须先将其转换回 HTML 和 CSS，然后才能在网页中呈现。您的问题需要更多背景信息才能有意义。
@Quentin 按照您的建议，我如何将数据存储到 JSON 中同时处理 HTML 和 CSS，这样我就不会丢失我的格式和内容？

标签： html css json webpage

【解决方案1】：

您似乎在混淆概念。正如其他人所指出的，JSON 只是另一种方式，您可以通过这种方式以人类和机器都可以轻松理解的方式表示信息。这是一种格式。

你能把你的 HTML 页面转换成 JSON 吗？简单的答案是肯定的，但这样做没有任何好处。

var json = {
  html: '<h1>User_Testing1</h1> <button class="collapsible">This is the first tab</button> <div class="content"> <p>This is the sub-category of the first tab.</p> </div> <button class="collapsible">This is the second tab</button> <div class="content"> <p>This is the sub-category of the second tab.</p> </div> <button class="collapsible">This is the third tab</button> <div class="content"> <p>This is the sub-category of the third tab.</p> </div> <button class="collapsible">This is the fourth tab</button> <div class="content"> <p>This is the sub-category of the fourth tab,</p> </div>',
  css: '.collapsible { background-color: #004c97; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; font-family: Arial; } .active, .collapsible:hover { background-color: #FFC61E; } .content { padding: 0 18px; display: none; overflow: hidden; background-color: #f1f1f1; font-family: Arial; }',
  javascript: 'var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); }'
};

var page = '<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1">' + '<style>' + json.css + '</style>' + '</head><body>' + json.html + '<script>' + json.javascript + '<\/script>' + '</body></html>';

document.write(page);
document.close()

【讨论】：

注意：document.write(....); 后面总是需要跟document.close();，否则在某些浏览器中可能无法正常显示。
@PeterB 修改了我的答案以包含它。谢谢你接听。