Question

我想将一个值存储在一个地方，这样就不必在HTML文档中一遍又一遍地键入它。没有数据库，PHP或类似的东西。

例如，考虑一下这样的事情：

HTML

<!-- Desktop -->
<div class="desktop">
<p>Hello world.</p>
</div>

<!-- Tablet -->
<div class="tablet">
<p>Hello world.</p>
</div>

<!-- Mobile -->
<div class="mobile">
<p>Hello world.</p>
</div>

CSS

.desktop { color: blue }
.tablet { color: red }
.mobile { color: green}

@media only screen and (min-width: 1000px) {
.tablet, .mobile { display: none; }
}

@media only screen and (min-width: 768px) and (max-width: 999px) {
.desktop, .mobile { display: none; }
}

@media only screen and (max-width: 767px) {
.desktop, .tablet { display: none; }
}

我想设置一个等于<p>Hello world.</p>的变量，这样，如果我需要多次使用它，则不必一遍又一遍地重复它。

这不仅适用于媒体查询，还适用于更多方案（例如，引用大型文档内不同位置的频繁更新的URL）。

this给我的印象是，这在纯HTML中是不可能的。

如果这不能仅用HTML来完成，那么如何用Javascript + HTML来完成呢？

Answer 1

似乎您正在寻找类似templating engine或HTML preprocessor

的东西。

基本上，您的想法是，以可读/简单的方式编写代码，然后预处理器/模板引擎将其“编译”为可以在浏览器中运行的代码（而不是像PHP这样的运行时来构建页面）。 / p>

Answer 2

使用Javascript DOM Api。您可以动态添加或删除html元素的属性。

Answer 3

I would like to set a variable equal to <p>Hello world.</p>

在这种情况下，您可以使用HTML模板。 https://www.w3schools.com/tags/tag_template.asp

或者，您可以在页面中隐藏一个div，并且可以将值保存为属性值或内容。

<div id="someid" value="my data"> Some other data </div>

但是，这两种方法都需要在Javascript中进行最少的工作。

HTML：将代码存储为变量以供重用

3 个答案: