zmiana koloru javascript

pytanie zadane 12 stycznia 2021 w JavaScript przez Michalecekxd Użytkownik (830 p.)
zmienione kategorie 12 stycznia 2021 przez ScriptyChris

<html>
<head>
</head>
<body>
<p id="czerwony" onclick="czerwonyguzik()"> </p>
<p>To jest przykład paragrafu, który może być dowolonie formatowany przez JavaScript </p>4
<script>
function czerwonyguzik()
{
document.getElementById("czerwony").innerHTML='<span style="color:red">?????????????????????'; // nie wiem co tu wpisać
}
</script>
</body>

Jak zrobić coś takiego że klikam w czerwony kwadrat i wtedy zmienia się kolor tekstu na czerwony?

W stylach css już mam kwadrat:

#czerwony
{
float:left;
margin:4px;
background-color:red;
width:1%;
height:3%;
}

I teraz mi tylko chodzi o to, że jak nacisnę na ten kwadrat to tekst "To jest przykład paragrafu, który może być dowolonie formatowany przez JavaScript" ma się zmienić na czerwony.

komentarz 12 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Na pewno musisz modyfikować style elementu w formie inline? Jeśli nie potrzeba Ci stylować z wartościami wyliczanymi dynamicznie, to lepiej w CSS stworzyć klasy nadające różne style i JS'em odpowiednio je przełączać na elemencie przy użyciu classList.

komentarz 13 stycznia 2021 przez VBService Ekspert (253,420 p.)
edycja 13 stycznia 2021 przez VBService

W stylach css już mam kwadrat:

@Michalecekxd, no z tego

width:1%;
height:3%;

raczej kwadrat nie wyjdzie. , chyba że czegoś nie wiem.

złe proporcje 1%-3% j.w.
nawet jak ustawisz
```
 width:3%;
height:3%;
```
[ edit ]
też nie otrzymasz kwadratu (tylko bardziej coś na wzór "czerwonego guzika") bo w znaczniku <p> brana będzie pod uwagę

wartość procentowa elementu w CSS odnosząca się do odpowiadających mu wartości u rodzica, np. width dziecka do width rodzica itd.

w podanym kodzie .outer-a rolę pełni body. bez ustawionego width i height

, ale jak np. użyjesz wartości pikseli
```
 width: 10px;
height: 10px;
```

komentarz 13 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.)

@VBService, nie wiem czy dobrze Cię zrozumiałem, ale wartości procentowe elementu w CSS odnoszą się do odpowiadających im wartości u parenta, np. width dziecka do width rodzica itd.

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages:~:text=percentage%20values%20are%20always%20relative

https://developer.mozilla.org/en-US/docs/Web/CSS/percentage

Przykład: parent jest prostokątem, a child jest kwadratem, mimo że ma różne wartości procentowe dla width i height

https://codepen.io/ScriptyChris/pen/PoGyQVm

1	komentarz 13 stycznia 2021 przez VBService Ekspert (253,420 p.) w podanym kodzie .outer-a rolę pełni body. bez ustawionego width i height

3 odpowiedzi

odpowiedź 12 stycznia 2021 przez SzkolnyAdmin Szeryf (86,400 p.)

Poczytaj o atrybucie style: https://developer.mozilla.org/pl/docs/Web/API/Element/style

Nie zmieniasz zawartości akapitu, tylko nadajesz mu styl. I nie guzika (id="czerwony"), tylko akapitu z tekstem.

komentarz 12 stycznia 2021 przez Michalecekxd Użytkownik (830 p.)

mógłbyś napisać jak powinien wyglądać ten kod? bo nie mogę tego zrozumieć

odpowiedź 13 stycznia 2021 przez Marchiew Dyskutant (7,690 p.)

<html>
<head>
</head>
<body>
<p id="czerwony"></p>
<p id="paragraf">To jest przykład paragrafu, który może być dowolonie formatowany przez JavaScript </p>
<script>

function zmianaKoloru() {
    document.getElementById('paragraf').style = 'color: red';
}

document.getElementById('czerwony').addEventListener('click', zmianaKoloru);

</script>
</body>

Coś takiego żebyś rozumiał.

komentarz 13 stycznia 2021 przez VBService Ekspert (253,420 p.)
edycja 13 stycznia 2021 przez VBService

document.getElementById('paragraf').style.color = "red";

Moim zdaniem lepiej jest użyć jak napisał:

@ScriptyChris,

... to lepiej w CSS stworzyć klasy nadające różne style i JS'em odpowiednio je przełączać na elemencie przy użyciu classList.

odpowiedź 13 stycznia 2021 przez VBService Ekspert (253,420 p.)
edycja 13 stycznia 2021 przez VBService

Efekt można uzyskać bez js-a Codepen

<p class="guzik czerwony"></p><br>
<p class="first">To jest przykład paragrafu, który może być dowolonie formatowany przez Css</p><br>
<input type="checkbox" id="guzik">
<label class="guzik czerwony" for="guzik"></label><br>
<p>To jest przykład paragrafu, który może być dowolonie formatowany przez Css</p><br>

.guzik {
  float: left;
  margin: 4px;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.guzik:active ~ p.first {
  background-color: red;
  animation: bg-to-red 1s;
}
.guzik:hover {
  animation: line-holo 1.2s infinite;
}
.guzik:hover::after {
  content: 'kliknij';
  font: 0.65em/0.68em monospace;
  padding-left: 2em;
}
#guzik {
  display: none;
}
#guzik:checked ~ p {
  background-color: red;
  animation: bg-to-red 1s;
}
#guzik:not(:checked) ~ p {
  background-color: transparent;
  transition: background 1s ease-out;
}
.czerwony {
  background-color: red;  
}
@keyframes line-holo {
  0% {
    box-shadow: 0px 0px 0px rgba(255,0,0,1);
  }
  50% {
    box-shadow: 0px 0px 20px rgba(255,255,255,1),
                0px 0px 25px rgba(255,0,0,1);
    transform: scale(1.2);
  } 
  100% {
    box-shadow: 0px 0px 0px rgba(255,255,255,1);
  }  
}
@keyframes bg-to-red {
  from{
    background-color: transparent;
  }
  to {
    background-color: red;
  }
}

... lub

@ScriptyChris,

... to lepiej w CSS stworzyć klasy nadające różne style i JS'em odpowiednio je przełączać na elemencie przy użyciu classList.

<p class="guzik czerwony"></p>
<p>To jest przykład paragrafu, który może być dowolonie formatowany przez JavaScript i Css</p>

.guzik {
  margin: 4px;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.guzik:hover {
  animation: line-holo 1.2s infinite;
}
p {
  transition: background 1s ease-out;
}
.czerwony {
  background-color: red;
  transition: background 1s ease-out;
}
@keyframes line-holo {
  0% {
    box-shadow: 0px 0px 0px rgba(255,0,0,1);
  }
  50% {
    box-shadow: 0px 0px 20px rgba(255,255,255,1),
                0px 0px 25px rgba(255,0,0,1);
    transform: scale(1.2);
  } 
  100% {
    box-shadow: 0px 0px 0px rgba(255,255,255,1);
  }  
}

const guzik = document.querySelector('p.guzik');
const p = document.querySelector('p:not(.guzik)');
guzik.addEventListener('click', () => {
  p.classList.toggle('czerwony');
});

Codepen

<p class="guzik czerwony"></p>
<p class="guzik zielony"></p>
<p class="guzik pomaranczowy"></p>
<p class="guzik niebieski"></p>
<p class="guzik czarny"></p>
<p class="guzik zolty"></p>
<p>To jest przykład paragrafu, który może być dowolonie formatowany przez JavaScript i Css</p>

.guzik {
  display: inline-block;
  margin: 0.5em;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.guzik:hover {
  animation: line-holo 1.2s infinite;
}
p {
  font: 1em/1.2em monospace;
  transition: all 1s ease-out;
}
.czerwony {
  background-color: red;
  color: white;
}
.zielony {
  background-color: green;
  color: white;
}
.pomaranczowy {
  background-color: orange;
}
.niebieski {
  background-color: blue;
  color: white;
}
.czarny {
  background-color: black;
  color: white;  
}
.zolty {
  background-color: yellow;
  color: black;
  border: 1px solid black;
}
@keyframes line-holo {
  0% {
    box-shadow: box-shadow: 0px 0px 0px rgba(255,255,255,1);
  }
  50% {
    box-shadow: 0px 0px 10px rgba(255,255,255,1),
                0px 0px 15px var(--holo-color),
                0px 0px 20px var(--holo-color);
    transform: scale(1.2);
  } 
  100% {
    box-shadow: 0px 0px 0px rgba(255,255,255,1);
  }  
}

const holo_color_variables = document.documentElement;
const guziki = document.querySelectorAll('p.guzik');
const p = document.querySelector('p:not(.guzik)');

guziki.forEach((guzik) => {
  guzik.addEventListener('click', (e) => {
    const css = e.target.classList; // <p class="guzik kolor_klasy">
    if (!p.classList.contains(css[1])) p.className = '';
    p.classList.toggle(css[1]); // <p class="guzik czerwony"> [0] guzik, [1] czerwony
  });
  
  guzik.addEventListener('mouseover', (e) => {
    const value = window.getComputedStyle(e.target, null).getPropertyValue('background-color');
    holo_color_variables.style.setProperty('--holo-color', value);
  });  
})