Avatar billede perj2000 Novice
13. december 2022 - 20:45 Der er 7 kommentarer

Dynamisk ændring af et element inde i et CSS element

Hej

Kan det lade sig gøre at udskifte værdien af f.eks. "color" i et CSS element.
Se dette meget simple eksempel:

<html>
<head>
<style>
.PageHeader{
    font-family: Tahoma;
    color: #4D4D4D;
    font-size: 18px;
    background-color: #FFFFFF;
    font-weight:bold;
    padding-left: 4px;
}
</style>
</head>

<body>
<span class="PageHeader">FØR AAAAAAAAAAAAAAAAAAAAAA<span>

<script>
document.style.PageHeader.color = "FFFF00";
</script>

<span class="PageHeader">EFTER BBBBBBBBBBBBBBBBBBBBB<span>

</body>
</html>

Håber det er tydeligt nok hvad jeg har til hensigt her ...
Men, kan det i det hele taget lade sig gøre ?

Fejlen i browseren (Edge) er "Uncaught TypeError: Cannot set properties of undefined (setting 'color')"


Hilsen
Per Jacobsen
Avatar billede perj2000 Novice
13. december 2022 - 20:49 #1
Fik ikke med at hele ideen er at jeg har denne style (PageHeader) som bruges mange steder, men, farven og bredden kan ændre sig alt efter hvilket side som vises. Og jeg ville bare gerne nøjes med at have den defineret i et generelt style sheet som inkluderes på alle sider ....
Avatar billede Webmover Praktikant
13. december 2022 - 21:03 #2
Hvis du bruger Jquery biblioteket kræver det blot denne linje kode :
$('.PageHeader).css("color","#ffff00");
Avatar billede Webmover Praktikant
13. december 2022 - 21:05 #3
hov der mangler et "
Det er :
$(".PageHeader").css("color","#ffff00");
Avatar billede perj2000 Novice
13. december 2022 - 21:30 #4
Tak for svar!.
Jeg har aldrig brugt Jquery før ...

Skal jeg da lægge denne kodelinje
$('.PageHeader).css("color","#ffff00");

ind i <script> blokken og ikke andet ?
Avatar billede perj2000 Novice
13. december 2022 - 21:50 #5
hej igen

Nu fangede jeg den, skulle jo også inkludere selve jquery filen.
1000 tak for hjælpen
Avatar billede keysersoze Guru
13. december 2022 - 21:59 #6
Det virker som et kæmpe overkill at inkludere jQuery bare for at skifte en farve når det kan klares med alm JS;

document.querySelector('.PageHeader').style.color = '#FFFF00';
Avatar billede Henrik Hansen Forsker
14. december 2022 - 11:39 #7
Man kunne også bruge CSS-variable:
https://davidwalsh.name/css-variables-javascript

<style>
:root {
  --PageHeaderColor: green;
}
.PageHeader {
  color: var(--PageHeaderColor);
}
</style>

<script>
function changePageHeaderColor( col ) {
  document.documentElement.style.setProperty('--PageHeaderColor', col);
}
</script>

Brug: changePageHeaderColor("#FFFF00") eller changePageHeaderColor("red")
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester