CODEWITHSUNDEEP
javascriptcsstarget
Alex
Alex

Reputation: 81

Modify :target in javascript

I have this in CSS :

#box:target {
    box-shadow: 0px 0px 20px black;
}

On a "parent" page (page1), I have a button that makes you go to another page : "page2.html#box". So the #box:target is applied when I the page is loaded. But with a button on the page1, I activate a function which purpose is to change the #box:target properties. I'm looking for a way to change this in javascript. Not :focus.

Upvotes: 0

Views: 174

Answers (1)

zer00ne
zer00ne

Reputation: 43910

Notice to Readers

This Answer Concerns the Original Post First Draft

The OP has been edited to an entirely different question. So if this answer is confusing, you'll need to review the edits. I apologize for any inconvenience.

:target

You do not need JavaScript for simple style switch. It appears that you have misunderstood the requirements needed to implement :target pseudo-class.

Requirements

  1. Two <a>nchor tags and a tag of any type as the target.

        <a>ON</a>  <a>OFF</a>  <section>SECTION</section>

    One <a> will "turn on" the new <section> style and the other <a> will "turn it off".

  2. Next, the <section> needs an #id. Both <a> need an href attribute. The values of each href is different from the other and is specific (see comment below this example): 

          <a href="">ON</a>     <a href="">OFF</a>  <section id="S">SECTION</section>

    ON: Must be    ☝         OFF: Must be a ☝
    the #id of target: #S    "non-jumping" value #/

  3. In the CSS, add two rule sets:

    1. The first one is the target tag at default (OFF): 
      #S { width: 44vw; height: 44vw; border: 4px solid #444 }
    2. The second one is the target tag activated (ON). Suffix the :target pseudo-class: 
      #S:target { text-shadow: 4px 4px 4px 4px #444; }

  4. Here's what the HTML layout should look like more or less:

       <a href="#S">ON</a>  <a href="#/">OFF</a>  <section id="S">SECTION</section>

Demo

html,
body {
  font: 900 10vh/1 Consolas;
}

a {
  color: blue;
}

a:hover,
a:active {
  color: cyan;
}

#B {
  box-shadow: 12px 5px 8px 10px inset rgba(0, 0, 0, 0.4);
  border: 6px inset rgba(0, 0, 0, 0.8);
  width: 40vw;
  height: 40vh;
  font-size: 20vh;
  text-shadow: 4px 7px 2px rgba(0, 0, 0, 0.6);
}

#B:target {
  box-shadow: 12px -5px 4px 4px rgba(0, 0, 0, 0.4);
  text-shadow: 4px -3px 0px #fff, 9px -8px 0px rgba(0, 0, 0, 0.55);
}
<a href="#B" class='on'>ON_</a><a href="#/" class='off'>OFF</a>

<figure id='B' class='box'>
  <figcaption>BOX</figcaption>
</figure>

Upvotes: 1

Related Questions