9 svar · 333 visningar · startad av sys19
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?
<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>
:)
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... ;-)
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?
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.
:)
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>
<A HREF="javascript:get_color(1)">Färg 2</A>
<A HREF="javascript:get_color(2)">Färg 3</A>
<A HREF="javascript:get_color(3)">Färg 4</A>
<A HREF="javascript:get_color(4)">Färg 5</A>
<A HREF="javascript:get_color(5)">Färg 6</A>
..........................................................
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>
...
:)
varför använder man sig av o.value och inte bara o??
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
jaha ok... tackar! varje dag lär man sig nåt nytt... =)
