Aussehen der Webseite mit jQuery verändern
In diesem Tutorial lernst du wie man das Aussehen einer Webseite mit jQuery verändern kann.
Dazu können wir ganz einfach z.B. ein Attribut eines Feldes überschreiben. In diesem Beispiel können wir den Link des Iframes (also die src/source) verändern, in dem wir über das Viereck Hovern.
Man könnte den Code problemlos ändern und z.B. das Viereck vergrößern in dem man das height und das width Attribut überschreibt, wenn man drüberfährt. Allgemein kann man dieses Verfahren nun nutzen um das Aussehen der Webseite ohne weiteres zu verändern.
Aussehen der Webseite mit jQuery verändern Beispiel
<html>
<head>
<title>jQuery</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="jquery-2.2.1.min.js"></script>
<style type="text/css">
#viereck{
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
}
</style>
</head>
<body>
<div id="viereck"></div>
// Ein iFrame, welches uns die Seite anzeigt
<iframe src="http://fifa.de"></iframe>
<script type="text/javascript">
// Wenn wir über das viereck drüberfahren startet die Funktion
$("#viereck").hover(function(){
// Die Funktion verändert das "src" Attribut des Iframes zu panjutorials.de
$("iframe").attr("src", "https://panjutorials.de");
});
</script>
</body>
</html>