javascript - Change html Text with conditional css but without js - Stack Overflow

admin管理员组

文章数量:1425902

Sorry about this absolutely newbie question, but I've been searching for an already similar post, and couldn't find it.

My question is:

I have a paragraph text in my HTML code which I want to automatically change into a new text once I click a specific Button.

Can this be done with CSS only, without any javascript?

Since some users block javascript, that's why I was looking for a way around...

Thanks a lot.

Sorry about this absolutely newbie question, but I've been searching for an already similar post, and couldn't find it.

My question is:

I have a paragraph text in my HTML code which I want to automatically change into a new text once I click a specific Button.

Can this be done with CSS only, without any javascript?

Since some users block javascript, that's why I was looking for a way around...

Thanks a lot.

• javascript
• css
• replace
• onclick

Share Improve this question Follow edited Sep 4, 2017 at 7:08 fana it asked Sep 4, 2017 at 6:44 fana itfana it 6322 silver badges1414 bronze badges 3

• 1 No, it can't be done with just CSS code – Ovidiu Unguru Commented Sep 4, 2017 at 6:46
• txs. Since some users block javascript, that's why I was looking for a way around... – fana it Commented Sep 4, 2017 at 7:07
• @OvidiuUnguru , yes it can stackoverflow./questions/27830028/… – zar3bski Commented Dec 5, 2018 at 17:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

actually @Vaidya & @Preet it is possible via css only :

https://css-tricks./swapping-out-text-five-different-ways/

@fana you'll need to use a plus selector or tilde selector to make the changes affect the following div not itself but other than that you're good to go.

I can see that using css to replace content is strongly discouraged within the stackoverflow munity. However I haven't found another cause other then that of code cleanliness.

I really think in ing years the true potential of CSS/SASS will unravel and people will cease to see the programmatic/dynamic as strictly excluded from CSS/SASS.

It can't be done through CSS You must need to add a script for an on-click event.

I know it is not what you exactly want but it can give you idea about it and with some changes you can make it.(but conditional and on click event using css is definitely not possible, you need javascript for that)

If you can make it work on Text click itself then it is easily possible. You only need a checkbox which is hidden and label in which you will show text. On click of text you can swap into anther text with only css:

 #example {
      position: relative;
    }
    #example-checkbox {
      display: none;
    }
    #example-checkbox:checked + #example:after {
      content: "Hide";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: white;
    }

 <input id="example-checkbox" type="checkbox">
    <label for="example-checkbox" id="example">Show</label>
   

Reference See css only part.

Hope it will help you.

本文标签： javascriptChange html Text with conditional css but without jsStack Overflow