---
title: "Knapp som växlar färgen på bakgrunden"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/69215-knapp-som-växlar-färgen-på-bakgrunden"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "sys19"
published: "2003-02-24T12:57:07.000Z"
updated: "2003-02-26T06:53:15.000Z"
replies: 9
views: 345
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/69215-knapp-som-växlar-färgen-på-bakgrunden"
---

# Knapp som växlar färgen på bakgrunden

## #1 — sys19, 2003-02-24T12:57Z

Vi har tänk att göra en simpel knapp som växlar bakgrundsfärgen
i dokumentet. Den skall läsa av färgen från en textruta som användaren ska fylla i (i HEX t ex #000099).

Skapa rutan och knappen är inga problem men vi vet inte riktigt vilken typ av knapp som ska användas. Har skissat lite på en lösning där knappen är av typen "submit" och action sätter bgcolor till önskat värde. Vi virrar bara ihop det hela tiden. Nån som har någon liten smart kodsnutt som lösning?

Permalänk: https://www.webforum.nu/p/69215

## #2 — Peter S, 2003-02-24T13:05Z

```
<script type="text/javascript">
<!--

function changeBgColor(o){
	document.body.style.backgroundColor = o.value;
	return false;
};

//-->
</script>
...
<form onsubmit="return changeBgColor(this.elements['clr'])">
     <input type="text" name="clr" maxlength="7" size="7" value="#">
     <input type="submit">
</form>
```

 :)

Permalänk: https://www.webforum.nu/p/959933

## #3 — sys19, 2003-02-24T13:08Z

Tack! Det var så man gjorde ja! Vi fattade inte riktigt vart man skulle sätta den heller men "elements" verkar ju logiskt så här i efterhand... ;-)

Permalänk: https://www.webforum.nu/p/959941

## #4 — sys19, 2003-02-24T13:33Z

Men varför så här: 

document.body.style.backgroundColor = o.value;

och inte så här?:

document.bgColor = o.value;

Finns det någon fördel att skriva som du gjort?

Permalänk: https://www.webforum.nu/p/959969

## #5 — Peter S, 2003-02-24T14:49Z

Nej, resultatmässigt är det ingen skillnad mellan de båda sätten. Jag använde mig av *style*\-objektet, med vilket du kan sätta någon av de alla CSS-egenskapern som finns tillgängliga; medan du använde dig av egenskapen *bgColor* hos *Document*.

 :)

Permalänk: https://www.webforum.nu/p/960048

## #6 — syrolis, 2003-02-25T17:16Z

Har en liknande fråga

Men jag undrar om det går att byta bakgrundsfärgen inuti alla tabeller på samma sätt med knapp som ovan eller med länkar som i tex den kodsnutten jag bifogar nedan?
Fast den här kodsnutten ändrar bakgrundsfärgen på dokumentet...

//Sylvia

...........................................................

 \<SCRIPT language="JavaScript"\>
\<!--
function get_color(color_num)
{
var now_color=color_num;

var my_color= new Array(6)
 my_color\[0\]="#1E363C";
 my_color\[1\]="#808040";
 my_color\[2\]="#999966";
 my_color\[3\]="#A4A4DB";
 my_color\[4\]="#7F989F";
 my_color\[5\]="#669999";

document.bgColor=my_color\[now_color\];
}
//--\>
\</SCRIPT\>
\<P\>
\<B\>Ändra bakgrundsfärgen!\</B\>
\<P\>
\<A HREF="javascript:get_color(0)"\>Färg 1\</A\>
&nbsp;&nbsp;
\<A HREF="javascript:get_color(1)"\>Färg 2\</A\>
&nbsp;&nbsp;
\<A HREF="javascript:get_color(2)"\>Färg 3\</A\>
&nbsp;&nbsp;
\<A HREF="javascript:get_color(3)"\>Färg 4\</A\>
&nbsp;&nbsp;
\<A HREF="javascript:get_color(4)"\>Färg 5\</A\>
&nbsp;&nbsp;
\<A HREF="javascript:get_color(5)"\>Färg 6\</A\>

..........................................................

Permalänk: https://www.webforum.nu/p/960887

## #7 — Peter S, 2003-02-25T17:28Z

Exempel:

```
<script type="text/javascript">
<!--

function changeColor(o){
	var tables = document.getElementsByTagName("table");

	for(var i=0; i<tables.length; i++)
		tables[i].style.backgroundColor = o.value;
	return false;
};

//-->
</script>
...
<form onsubmit="return changeColor(this.elements['foo'])">
     <input type="text" name="foo" size="7" maxlength="7" value="#">
     <input type="submit">
</form>
...
```

 :)

Permalänk: https://www.webforum.nu/p/960899

## #8 — rIkLuNd, 2003-02-25T22:18Z

varför använder man sig av o.value och inte bara o??

Permalänk: https://www.webforum.nu/p/961107

## #9 — dectgap, 2003-02-25T23:14Z

För att o är själva textrutan, medan o.value är det värde du skriver i rutan.

Du kan ändra o.value till endast o, men då måste du också ändra argumentet this.elements\['foo'\] till this.elements\['foo'\].value

Permalänk: https://www.webforum.nu/p/961152

## #10 — rIkLuNd, 2003-02-26T06:53Z

jaha ok... tackar! varje dag lär man sig nåt nytt... =)

Permalänk: https://www.webforum.nu/p/961205

---

Tråden på webben: https://www.webforum.nu/amne/javascript/69215-knapp-som-växlar-färgen-på-bakgrunden