PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
K

Javascript

Door Kees de braak op 11-07-2006 22:58
416 views
Ik wil het volgende realiseren:

je vult een kleurcode (RGB) in een tekstveld. Zonder # ervoor. (Dit laatste kan niet anders.)
Daarnaast staat een button met preview erop ofzo.

Ik heb het volgende script:


function changecss(theClass,element,value) {
	
	 var cssRules;
	 if (document.all) {
	  cssRules = 'rules';
	 }
	 else if (document.getElementById) {
	  cssRules = 'cssRules';
	 }
	 for (var S = 0; S < document.styleSheets.length; S++){
	  for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
	   if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
	    document.styleSheets[S][cssRules][R].style[element] = value;
	   }
	  }
	 }	
	}


Dat is de functie die bij deze button hoort.

<input type="button" value="Preview" onclick="changecss('body','background','red')">

Alleen die waarde red, die staat gewoon in het script, maar deze waarde moet dus de waarde worden die in een tekstveld ervoor staat + de #
#000000 bijvoorbeeld.

Je klikt dan dus op de button en de achtergrond wordt zwart. Maar hoe pas ik dit aan op de manier zoals ik het graag wil?
Martijn Wieringa
11-07-2006 23:04
Ik denk dat je dan beter zo iets kan doen:

<input type="button" onclick="javascript: this.style.background: red;" value="klik hier">
Martijn Wieringa
11-07-2006 23:05
of

<input type="button" onclick="javascript: this.style.background: #" + document.getElementById('textfield').value + ";" value="klik hier">
K
Kees de braak
11-07-2006 23:10
Maar werkt dit ook als ik meerdere tekstfields wil previewen, en ik wil ook tekst andere kleur geven, niet alleen een achtergrond. En classes;)
Martijn Wieringa
11-07-2006 23:16
Hangt van je browser af en hoe actief deze is in het bijwerken van classes.. 'k ben daarmee vaker in problemen gekomen dat zaken niet goed worden gerefreshed na het aanpassen van een class.. dus da's niet echt iets wat ik je zou aanraden. :(

Maar je kan een functie schrijven die meerdere eigenschappen instelt.. dan krijg je bijv:


<input type="button" onclick="javascript: reStyle(this);" value="klik hier">


En dan als JS code iets als


function reStyle(obj)
{
obj.style.background = '#' . document.getElementById('textfield_1').value;

obj.style.color = '#' . document.getElementById('textfield_2').value;

obj.style.fontFamily =  document.getElementById('textfield_3').value;

... etc
}
Martijn Wieringa
11-07-2006 23:17
Euh..

die '.' moet in JavaScript natuurlijk een + worden :$
K
Kalle P
11-07-2006 23:22
Waarom geen php?

<?php
$bgkleur = '000000';
if($_SERVER['REQUEST_METHOD'] == "POST" and (strlen($_POST['bgkleur']) == 6) ){
$bgkleur = $_POST['bgkleur'];
}
elseif(strlen($_POST['bgkleur']) != 6){
  $fout = 'Vul 6 cijfers of letters in';
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<title>kleur</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#<?php echo $bgkleur; ?>">

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<p>
<label for="bgkleur">Achtergroundkleur:</label></span>
            <input name="bgkleur" type="text" value="<?php echo $bgkleur; ?>">
<span><?php echo $fout; ?></span>
</p>
<p>
<span></span>
<input name="submit" type="submit" value="Achtergrondkleur">
</p>

</body>
</html>


edit:
code tags
je kan de input nog controleren op getallen of cijfers.

edit2: } vergeten
edit3: else weggehaald
K
Kees de braak
11-07-2006 23:28
@Pholeron: Ik kijk nu of het lukt, maar hoe werkt het precies met het opgeven van die namen? Als ik de achtergrond kleur van een bepaalde tabel wil aanpassen?
@kalle: Deze manier is omslachtig maar effectief, maar een javascript is veel handiger. Als het niet lukt schrijf ik zoals dit.

Martijn Wieringa
11-07-2006 23:39
Je geeft de textvelden die een waarde bevatten die je wilt gebruiken een ID (i8n mijn voorbeeld wordt de achtergrondkleur uitgelezen uit een veld met als id 'textfield_1'.

Javascript ondersteunt bij mijn weten vrijwel alle style tags, waarbij elk 'deel' begint met een hoofdletter, en er geen streepjes o.i.d. worden gebruikt..

dus de css:


<tag style="border-top: #000000 solid 1px">


wordt in js:


this.style.borderTop = '#000000 solid 1px';


een tabel kan bijv zo:

HTML:

<table id="tabel_1">
<tr>
<td>blaat</td>
</tr>
</table>


JS:

document.getElementById('tabel_1').style.background = '#FF0000';

Reageren

Inloggen om te reageren