Question

我有一个只使用HTML和CSS的项目。是否可以使用浏览器更改某些事件上HTML元素的内容，就像使用JavaScript“.innerHTML”但只使用CSS一样。

例如使用@media screen and(..)

即使删除当前的类名并在窗口重新调整大小上附加另一个类也是合适的。

Answer 1

这完全取决于您想要触发更改的操作，但一般，是的，这是可能的。

以下是基于宽度的示例：

HTML

<div id="something-awesome"></div>

CSS

#something-awesome {
  &:before {
    content: "This is some great text here.";
  }
}

@media (min-width: 500px) {
  #something-awesome {
    &:before {
      content: "This is some other super great text.";
    }
  }
}

以下是展示示例如何运作的小提琴：https://jsfiddle.net/ttLc7a4t/2/

更改输出框的宽度以查看其实际效果。

Answer 2

是否可以在不使用JavaScript的情况下更改html内容？

您无法使用CSS更改内容，没有。

但可以使用CSS使内容可见且不可见。

以下是使用CSS属性overflow:hidden

的简单示例

当您将鼠标悬停在下方网格中的每个方框上时，中间的方框会正确告诉您正在悬停的方框。

＆＃13;

div,
div span {
display: inline-block;
width: 150px;
height: 50px;
font-size: 36px;
line-height:50px;
font-weight: bold;
text-align: center;
}

div {
float: left;
background-color: rgb(207,207,207);
border: 1px solid rgb(0,0,0);
}

div div {
position: relative;
z-index: 12;
width: 150px;
border: none;
}

div:nth-of-type(4),
div:nth-of-type(6) {
clear:left;
}

div:nth-of-type(4) {
margin-right: 152px;
}

div.textbox {
position: relative;
top:-52px;
left: -304px;
overflow: hidden;
}

.textbox div {
background-color: red;
}

div:nth-of-type(2):hover ~ .textbox div {
top: -50px;
}

div:nth-of-type(3):hover ~ .textbox div {
top: -100px;
}

div:nth-of-type(4):hover ~ .textbox div {
top: -150px;
}

.textbox:hover div {
top: -200px;
}

div:nth-of-type(5):hover ~ .textbox div {
top: -250px;
}

div:nth-of-type(6):hover ~ .textbox div {
top: -300px;
}

div:nth-of-type(7):hover ~ .textbox div {
top: -350px;
}

div:nth-of-type(8):hover ~ .textbox div {
top: -400px;
}

div:nth-of-type(2):hover,
div:nth-of-type(2):hover ~ .textbox {
background-color: orange;
}

div:nth-of-type(3):hover,
div:nth-of-type(3):hover ~ .textbox {
background-color: yellow;
}

div:nth-of-type(4):hover,
div:nth-of-type(4):hover ~ .textbox {
color: white;
background-color: green;
}

.textbox:hover {
color: white;
background-color: black;
}

div:nth-of-type(5):hover,
div:nth-of-type(5):hover ~ .textbox {
color: white;
background-color: blue;
}

div:nth-of-type(6):hover,
div:nth-of-type(6):hover ~ .textbox {
color: white;
background-color: purple;
}

div:nth-of-type(7):hover,
div:nth-of-type(7):hover ~ .textbox {
background-color: white;
}

div:nth-of-type(1):hover,
div:nth-of-type(8):hover,
div:nth-of-type(8):hover ~ .textbox {
background-color: red;
}

＆＃13;

<section>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

<div class="textbox">
<div>
<span>Box 1</span>
<span>Box 2</span>
<span>Box 3</span>
<span>Box 4</span>
<span>Box 5</span>
<span>Box 6</span>
<span>Box 7</span>
<span>Box 8</span>
<span>Box 9</span>
</div>
</div>

</section>

＆＃13;

Answer 3

否即可。 CSS只能用于设置样式，而不能用于设置内容。将两者混合将与separation of concerns进行混合。

CSS 2.1是一种样式表语言，允许作者和用户使用将样式附加到结构化文档。通过分离演示文稿从文档内容的文档样式，CSS 2.1简化网站创作和网站维护。

那就是说，你可以使用CSS看起来像你改变了内容。例如，您可以隐藏元素并显示另一个元素，或通过content属性更改生成的内容（不是真实内容）。

此外，CSS Scoping允许您用shadow tree替换元素的内容，但是您需要JS来创建该影子树。

是否可以在不使用JavaScript的情况下更改html内容？

3 个答案:

HTML

CSS