html - ændre style med havascript - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

Bruger #3134 @ 30.04.04 22:22

Hej,
jeg har før set og brugt en javascript kode, der i et normalt link, kan ændre noget af mit stylesheet - jeg kan bare ikke huske koden...

Nogen der kan hjælpe?

10 svar postet i denne tråd vises herunder
4 indlæg har modtaget i alt 4 karma

Sorter efter stemmer Sorter efter dato

Bruger #846 @ 30.04.04 22:35

435

Hej

Med følgende kan du ændre baggrundsfarven, for at give et eksempel:

Kode

<div onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='';">
test
</div>

Det laver så baggrunden gennemsigtig når du fjerner markøren.

--
Ronni Egeriis - http://sqdev.dk/
Co-Admin

Bruger #5358 @ 01.05.04 12:05

118

Hej,
jeg har før set og brugt en javascript kode, der i et normalt link, kan ændre noget af mit stylesheet - jeg kan bare ikke huske koden...

Nogen der kan hjælpe?

normalt ville man skrive det der skal gøres som en funktion:

<a id="test" onclick="skift_farve('test')" href="#" style="color: blue;">skrift farve</a>

<script>
function skrift_farve(id)
{
if(document.all[id]style.color == "blue"){
document.all[id]style.color = "red";
}else{
document.all[id]style.color = "blue";
};

};
</script>

du kan også bare skrive:
document.all.id.style.color = "blue";

id skal erstattes med id'et for det tag som skal skifte farve....
du kan også ændre color til den css attribut du vil ændre.......

Mvh. Jop...

Bruger #5620 @ 06.05.04 11:50

1.500

all er en IE collection så brug af den ville jeg mene er en rimelig dårlig fremgangs måde.

hvis du kun vil ændre et attribut kan du bruge

Kode

<script>
function skrift_farve(aObj)
{
  if(aObj.style.color == "blue")
  {
    aObj.style.color = "red";
  }else
  {
    aObj.style.color = "blue";
  };

};
</script>
<body>
<a id="test" onclick="skrift_farve(this)" href="#" style="color: blue;">skrift farve</a>
</body>

hvis du vil ændre flere kan du evt. lave 2 style klasser og skifte mellem dem.

Kode

<script>
function skrift_farve(aObj)
{
  aObj.className=(aObj.className =="class2")?"class1":"class2";
};
</script>
<style>
.class1{
  color:blue;
}  

.class2{
  color:red;
} 
</style>
<body>
<a id="test"  class="class1" onclick="skrift_farve(this)" href="#">skrift farve</a>
</body>

Bruger #3143 @ 20.05.04 22:05

1.965

all er en IE collection så brug af den ville jeg mene er en rimelig dårlig fremgangs måde.

hvis du kun vil ændre et attribut kan du bruge

Kode
<script>
function skrift_farve(aObj)
{
  if(aObj.style.color == "blue")
  {
    aObj.style.color = "red";
  }else
  {
    aObj.style.color = "blue";
  };

};
</script>
<body>
<a id="test" onclick="skrift_farve(this)" href="#" style="color: blue;">skrift farve</a>
</body>
hvis du vil ændre flere kan du evt. lave 2 style klasser og skifte mellem dem.

Kode
<script>
function skrift_farve(aObj)
{
  aObj.className=(aObj.className =="class2")?"class1":"class2";
};
</script>
<style>
.class1{
  color:blue;
}  

.class2{
  color:red;
} 
</style>
<body>
<a id="test"  class="class1" onclick="skrift_farve(this)" href="#">skrift farve</a>
</body>
okay jeg vidste ikke at all kun virker i IE men hvordan ville man ellers skrive at en funktion der ændre en attribut på et andet objekt.....

ps.. man behøves ikke at crosscode der er stort set kun IE 4 og op efter.... (IE udgør omkring 98% af det danske marked...)

Mvh. Jop...

document.getElemantById('ifForTag')

er den korrekte måde at få et objekt på ud fra id

du kan også skifte mellem hele stylesheets. Jeg kan ikke lige huske hvordan, men du kan lure det af fra fx http://www.helsbib.dk Hvor de ændrer skriftstørrelsen på den måde.

Bruger #5358 @ 07.05.04 12:57

118

all er en IE collection så brug af den ville jeg mene er en rimelig dårlig fremgangs måde.

hvis du kun vil ændre et attribut kan du bruge

Kode

<script>
function skrift_farve(aObj)
{
  if(aObj.style.color == "blue")
  {
    aObj.style.color = "red";
  }else
  {
    aObj.style.color = "blue";
  };

};
</script>
<body>
<a id="test" onclick="skrift_farve(this)" href="#" style="color: blue;">skrift farve</a>
</body>

hvis du vil ændre flere kan du evt. lave 2 style klasser og skifte mellem dem.

Kode

<script>
function skrift_farve(aObj)
{
  aObj.className=(aObj.className =="class2")?"class1":"class2";
};
</script>
<style>
.class1{
  color:blue;
}  

.class2{
  color:red;
} 
</style>
<body>
<a id="test"  class="class1" onclick="skrift_farve(this)" href="#">skrift farve</a>
</body>

okay jeg vidste ikke at all kun virker i IE men hvordan ville man ellers skrive at en funktion der ændre en attribut på et andet objekt.....

ps.. man behøves ikke at crosscode der er stort set kun IE 4 og op efter.... (IE udgør omkring 98% af det danske marked...)

Mvh. Jop...

Bruger #5358 @ 21.05.04 13:31

118

document.getElemantById('ifForTag')

er den korrekte måde at få et objekt på ud fra id

du kan også skifte mellem hele stylesheets. Jeg kan ikke lige huske hvordan, men du kan lure det af fra fx http://www.helsbib.dk Hvor de ændrer skriftstørrelsen på den måde.

document.getElemantById('id')

kan ikke bruges i IE hvilket er den mest benyttede browser... så kan man selvfølgelig diskutere hvor vidt man skal crosscode...

det kan godt være at w3c har sat getElemantById(id) som standart, men når IE ikke bruger denne funktion kan man godt glemme det... crosscoding er ikke nødvendigt.. men mindre man laver hjemmesider til nørder og folk fra andre lande... her hjemme bruger de fleste IE...

Mvh. Jop...

Bruger #3143 @ 21.05.04 13:49

1.965

document.getElemantById('id')

kan ikke bruges i IE

Pladder! Det han den da sagtens, og hvorfor så ikke bruge den i stedet for alle mulige andre, når den virker bedst?

Bruger #5358 @ 21.05.04 18:16

118

document.getElemantById('id')

kan ikke bruges i IE

Pladder! Det han den da sagtens, og hvorfor så ikke bruge den i stedet for alle mulige andre, når den virker bedst?

har lige teste denne kode:

Kode


<span id="test" onclick="test_color()" style="color: blue; font-size: 20;">hej med dig</span>
<script>
document.getElemantById('test').style.color = "yellow"; 
</script>

hvis man kan bruge getElemantById(id) det virker heller ikke at fjerne document. du kan da selv prøve....

man skal nemlig skrive:

if(document.all){
//her laves en sætning med document.all
}else{
//her laves en sætning med getElemant.ById()
}

i conditionen kan man i stedet skrive en is_ie variabel....

derfor bør man ikke lave crosscoding... fordi det er dobbelt arbejde...

Mvh. Jop...

Bruger #3143 @ 21.05.04 19:25

1.965

document.getElemantById('id')

kan ikke bruges i IE

Pladder! Det han den da sagtens, og hvorfor så ikke bruge den i stedet for alle mulige andre, når den virker bedst?

har lige teste denne kode:

Kode
<span id="test" onclick="test_color()" style="color: blue; font-size: 20;">hej med dig</span>
<script>
document.getElem[b][i][u]a[/b][/i][/u]ntById('test').style.color = "yellow"; 
</script>
hvis man kan bruge getElemantById(id) det virker heller ikke at fjerne document. du kan da selv prøve....

man skal nemlig skrive:

if(document.all){
//her laves en sætning med document.all
}else{
//her laves en sætning med getElemant.ById()
}

i conditionen kan man i stedet skrive en is_ie variabel....

derfor bør man ikke lave crosscoding... fordi det er dobbelt arbejde...

Mvh. Jop...

du har stavet det forkert, med a i stedet for e

<span id="test" style="color: blue; font-size: 20;">hej med dig</span>
<script type="text/javascript">
document.getElementById('test').style.color = "yellow";
</script>

---

testet i IE 6.0 og Mozilla 1.5

[Redigeret d. 21/05-04 19:27:59 af Jesper Kristensen]

Bruger #5358 @ 21.05.04 20:41

118

ok nu får jeg det til at virke...
syntax fejl... (selv om jeg havde cut paste herfra...)

Mvh. Jop...

ændre style med havascript

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler