meerdere CSS styles via JavaScript

Status
Niet open voor verdere reacties.

msyuser

Gebruiker
Lid geworden
22 jan 2014
Berichten
53
Is 't mogelijk om via JavaScript een script te schrijven waarmee ik meerdere complete CSS styles met .css als formaat aan mijn HTML te linken??
zo ja dan hoor ik 't wel.
 
Bedoel je iets als
Code:
<link rel="stylesheet" type="text/css" href="url.css >
 
Bedoel je iets als
Code:
<link rel="stylesheet" type="text/css" href="url.css >
nee
ik heb zeg maar twee .css files met twee complete styles, en wil via een .js script die linken aan mijn HTML pagina. zeg maar twee knoppen. elke knop verwijst naar een .css en via de javascript switch als ik 't ware tussen die twee styles.

snap je??
 
Laatst bewerkt:
Dit lijkt mij knap lastig aangezien de css bestanden op de server staan en JavaScript client side draait.

Het is wel mogelijk om css properties van elementen welke in de reeds getoonde pagina zitten te wijzigen mbv JavaScript.
 
Dit lijkt mij knap lastig aangezien de css bestanden op de server staan en JavaScript client side draait.

Het is wel mogelijk om css properties van elementen welke in de reeds getoonde pagina zitten te wijzigen mbv JavaScript.

ja ik zag ergens een tijd geleden een video of een artikel daardoor. maar weet niet meer.
ik bedoel zo'n css style switcher. als ik het op een andere manier dan met JS mag ook hoor. als ik maar dan switchen tussen css styles. daar gaat t me om.
 
Volgens mij moet dit met php kunnen.

if voorwaarde 1
echo '<css-1>'
else
echo'<css-2>'

Zelf eventjes verder uitwerken.
 
Dit kan inderdaad met php gedaan worden:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>php style switcher</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<?php
			if($_GET[css] == '2'){
				echo'
				<style>
					#switcher{width:100%; height:100%; background: #000fff;}
				</style>
				
				';
			}else{
				echo'
				<style>
					#switcher{width:100%; height:100%; background: #fff000;}
				</style>
				
				';
			}
		?>
</head>

<body>
	<div id = "switcher">
		<p>
			Dit is testtext <br />
			<a href = "?css=1"> Css 1</a><br />
			<a href = "?css=2"> Css 2</a>
		</p>
	</div>
		
</body>

</html>

i.p.v <style> tags te echo-en moet u dan link tags echo-en:
HTML:
<link rel="stylesheet" type="text/css" href="url.css >

Ook met javascript is het mogelijk:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>php style switcher</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<script>
			function changeBackground(color) {
				document.body.style.background = color;
			}
		</script>
</head>

<body>
	<div id = "switcher">
		<p>
			Selecteer uw achtergrondkleur: <br />
			<ul>
				<li><a href = "javascript:changeBackground('red');">Rood</a><br /></li>
				<li><a href = "javascript:changeBackground('yellow');">Geel</a><br /></li>
				<li><a href = "javascript:changeBackground('green');">Groen</a><br /></li>
			</ul>
			
		</p>
	</div>
		
</body>

</html>
 
Laatst bewerkt:
okee kan iemand me trouwens een PM sturen om mij op afstand te helpen graag want ik kom er niet uit...:confused:
 
okee kan iemand me trouwens een PM sturen om mij op afstand te helpen graag want ik kom er niet uit...:confused:

Maak een leeg bestand en noem het test.php
Plak daar de volgende code in:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
    <title>php style switcher</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <?php
            if($_GET[css] == '2'){
                echo'
                    <link rel="stylesheet" type="text/css" href="1.css >
                ';
            }else{
                echo'
               <link rel="stylesheet" type="text/css" href="2.css >
                ';
            }
        ?>
</head>
 
<body>
    <div id = "switcher">
        <p>
            Dit is testtext <br />
            <a href = "?css=1"> Css 1</a><br />
            <a href = "?css=2"> Css 2</a>
        </p>
    </div>
        
</body>
 
</html>

Maak vervolgens 2 lege bestanden en noem ze:
1.css
2.css


Upload vervolgens alle 3 de bestanden naar een server die php ondersteund en navigeer naar de test.php pagina(bijv: http://server.mi-soft.nl/hm.php)
 
ik heb nu twee css styles gemaakt en die in de zelfde map gezet waarop de index.html staat. ook heb ik de locatie van die styles aangegeven,maar zodra op die links klik verandert de style niet....


weet iemand hoe.....
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan