Modify :target in javascript

Question

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.

box-shadow property, after activate a function can you please elaborate it — brk
– brk, Commented Feb 25, 2019 at 10:04
Your question is pretty unclear. :target has nothing to do with focusing. Are you asking about focusing or targetting? — Quentin
– Quentin, Commented Feb 25, 2019 at 10:04
Can you just use :focus pseudo class with different styling developer.mozilla.org/en-US/docs/Web/CSS/:focus ? — maximelian1986
– maximelian1986, Commented Feb 25, 2019 at 10:23
I would suggest using :focus or :hover. If you want a smoother animation and to avoid a repaint, I would suggest setting your additionnal box-shadow on the pseudo elements :before and animating it (see How to animate box-shadow) — Jake
– Jake, Commented Feb 25, 2019 at 10:29

zer00ne · Accepted Answer · 2019-02-25 20:32:20Z

1

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

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

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>

edited Feb 25, 2019 at 20:32

answered Feb 25, 2019 at 11:53

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alex Over a year ago

I think you missunderstood my question. I just want to modify the css rules when the element is targeted, change for instance the boxShadow property. I perfectly know what :target is for.

Alex Over a year ago

I absolutely didn't ask an other question. Yous just don't understand at all what I want

zer00ne Over a year ago

Explain to me what .box:target supposed to do and why there's no mention of a child or parent page in the first version of the post? Concerning the most current version, why did you change .box:target to #box:target? Also what is the significance of a parent and child page if there isn't any <iframe>? Also what happened to the function from the first version why isn't it in the current version? I probably don't understand but it appears that neither does anyone else -- have you read the comments?

Alex Over a year ago

Excuse me to not master the HTML perfectly, there are people who learn you know. So can't you just be normal please and explain me ?

Alex Over a year ago

And :target is used when the ilement is targeted with his id by an a tag with href="#element"

Collectives™ on Stack Overflow

Modify :target in javascript

1 Answer 1

Notice to Readers

This Answer Concerns the Original Post First Draft

`:target`

Requirements

Demo

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Notice to Readers

This Answer Concerns the Original Post First Draft

Requirements

Demo

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related