Is it possible to change html content without using JavaScript? - Stack Overflow

admin管理员组

文章数量:1314514

I've a project where I only use HTML and CSS. Is it possible to change the content of an HTML element on some event with browser, like you do JavaScript '.innerHTML' but only using CSS.

For example using @media screen and(..)

Even removing current classname and appending another class on window re-size would be suitable.

I've a project where I only use HTML and CSS. Is it possible to change the content of an HTML element on some event with browser, like you do JavaScript '.innerHTML' but only using CSS.

For example using @media screen and(..)

Even removing current classname and appending another class on window re-size would be suitable.

• javascript
• html
• css

Share Improve this question Follow edited Mar 13, 2017 at 12:13 RegarBoy asked Jan 22, 2016 at 2:27 RegarBoyRegarBoy 3,52111 gold badge2525 silver badges4747 bronze badges 3

• 3 developer.mozilla/en/docs/Web/CSS/content – dsgriffin Commented Jan 22, 2016 at 2:29
• 1 Give a look to stackoverflow./questions/27830028/… – Aguardientico Commented Jan 22, 2016 at 2:32
• You can use :hover in CSS that responds when the mouse hovers over an element (you do all sorts of things in CSS based on hover, basically anything that can be done in CSS can change based on hover). And, you can response to resize events with @media rules. Not much else you can do to respond to an action in the browser without Javascript. You can even appear to change .innerHTML by hiding one element and showing another. – jfriend00 Commented Jan 22, 2016 at 2:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

It pletely depends on what action you're wanting to trigger the change on, but in general, yes, this is possible.

Here's an example based on width:

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.";
    }
  }
}

Here's a fiddle to show how the example works: https://jsfiddle/ttLc7a4t/2/

Change the width of the output box to see it in action.

No. CSS can only be used to set the stylying, not the content. Mixing both would be against the separation of concerns.

CSS 2.1 is a style sheet language that allows authors and users to attach style to structured documents. By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance.

That said, you can use CSS to look like you changed contents. For example, you can hide an element and show another one, or change the generated content (which is not real content) through the content property.

Additionally, CSS Scoping allows you to replace the contents of an element with a shadow tree, but you need JS to create that shadow tree.

Is it possible to change html content without using JavaScript?

You can't change the content with CSS, no.

But you can make content visible and invisible with CSS.

Here's a simple example using the CSS property overflow:hidden

As you hover over each box in the grid below, the box in the centre will tell you correctly which, box you are hovering over.

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;
}

<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>

本文标签： Is it possible to change html content without using JavaScriptStack Overflow