Kan ikke ændre body class

Du kan i dette forum stille og svare på spørgsmål vedrørende Java programmering på alle typer platforme.
Besvar
cape
Begynder
Indlæg: 1
Tilmeldt: 6. dec 2018, 19:41

Kan ikke ændre body class

Indlæg af cape » 6. dec 2018, 20:26

Jeg prøver at lave en side hvor man ændrer "body class" afhængig af externe data. Jeg forstår dog ikke hvad der skal til.
Det er meningen at "newHTML…… <body class="hot"> ændrer baggrunden. Kan man det? åbenbart ikke sådan.

Kode: Vælg alt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
			<meta http-equiv=refresh content=5 />
<title>Ny side1</title>
           <style>\n
             		 .cold {background: linear-gradient(to bottom, #7abcff, #0665e0 );}
    			     .hot {background: linear-gradient(to bottom, #fcdb88,#d32106);}
           </style>
 <script>
function changeText3(){
	var oldHTML = document.getElementById('para').innerHTML;
//	var newHTML = "<body class="hot">" + oldHTML + "</span>";
    var newHTML = "<span style='color:#000fff'>" + oldHTML + "</span>";
	document.getElementById('para').innerHTML = newHTML;
}
</script>
</head>
<body>
<!--<body class="hot"> Hvis det står der virker det -->
<p id='para'>Farven kan ændres men hvordan skifter man body class? </p> 
<input type='button' onclick='changeText3()' value='Change Text'/>
</body>

</html>

jepperask
Geni
Geni
Indlæg: 341
Tilmeldt: 4. nov 2012, 17:57

Re: Kan ikke ændre body class

Indlæg af jepperask » 7. dec 2018, 11:20

(du har postet under java, men tror du mener "javascript").

Du kan i moderne browsere bruge følgende til at tilføje/fjerne en klasse fra et element:

Kode: Vælg alt

    var para = document.getElementById('para');
    para.classList.add("mycolor");
    para.classList.remove("mycolor");
Jeg vil anbefale du gør dette for både "body" og "para". Forsøg at undgå innerHTML, især hvis du blot ønsker at opdatere styling.

Nedenfor finder du din kode med classList. Hvis du vil kunne "toggle" frem og tilbage, kan du lave en boolean som gemmer om klassen skal være på eller ej, og så opdatere den når man trykker på knappen.

Kode: Vælg alt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
  <meta http-equiv=refresh content=5 />
  <title>Ny side1</title>
  <style>\n
  .cold {background: linear-gradient(to bottom, #7abcff, #0665e0 );}
  .hot {background: linear-gradient(to bottom, #fcdb88,#d32106);}
  .mycolor {color:#000fff}
  </style>
  <script>
    function changeText3(){
      var para = document.getElementById('para');
      para.classList.add("mycolor");
      
      var body = document.getElementById('bodyElement');
      body.classList.add("hot");
    }
  </script>
  </head>
  <body id="bodyElement">
    <!--<body class="hot"> Hvis det står der virker det -->
    <p id='para'>Farven kan ændres men hvordan skifter man body class? </p> 
    <input type='button' onclick='changeText3()' value='Change Text'/>
  </body>
</html>

Besvar