-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.js
81 lines (66 loc) · 2.68 KB
/
demo.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/* Element verändern durch Austausch */
function switchNoCSS(){
/* Zu ersetzender Link, Zugriff über ID*/
var oldlink = document.getElementById("css");
/* Name der aktuellen CSS-Datei */
var href = oldlink.getAttribute("href");
/* Erzeugung des neuen Links */
var newlink = document.createElement("link");
/* Attribute setzen */
newlink.setAttribute("id", "css");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
/* Nächste CSS-Datei wählen */
if(href != "no.css")
newlink.setAttribute("href", "no.css");
else
newlink.setAttribute("href", "demo.css");
/* Den alten Link durch neuen ersetzen */
var parent = oldlink.parentNode;
parent.replaceChild(newlink, oldlink);
}
/* Element verändern durch Wertzuweisung */
function switchReset(newcss){
/* Zu ersetzender Link, Zugriff über ID*/
var oldlink = document.getElementById("css");
/* Name der aktuellen CSS-Datei */
var href = oldlink.getAttribute("href");
/* Nächste CSS-Datei wählen */
if(href != newcss)
oldlink.setAttribute("href", newcss);
else
oldlink.setAttribute("href", "demo.css");
}
/********* CSS togglen **************/
/* Zugriff auf Element über ID */
var togglecss = document.getElementById('btn_togglecss');
/* Klick Event Listener hinzufügen */
togglecss.addEventListener ('click',
function() { // anonyme Funktion
switchNoCSS();
},
true);
/********* Reset.css togglen **************/
/* Zugriff auf Element über ID */
var togglereset = document.getElementById('btn_togglereset');
/* Klick Event Listener hinzufügen */
togglereset.addEventListener ('click',
function() { // anonyme Funktion
switchReset("reset.css");
},
true);
/* Viewport Breite */
jQuery(document).ready(function () {
//////////////////////////////////////////////////////
// Aktuelle Viewport-Breite anzeigen
//////////////////////////////////////////////////////
// neues Element als erstes im Body-Tag einfuegen, DIV-Element mit Attributen und Eventhandler erzeugen
$( "body" ).prepend($('<div/>', { 'id': 'js-viewport-breitenanzeiger', 'text': 'Viewport: ' + $(window).width()/parseFloat($("body").css("font-size")) + ' em'}));
//////////////////////////////////////////////////////
// Event-Handler (beim Aendern der Fenstergroesse
// Viewport-Daten in DIV-Element-Textknoten schreiben)
//////////////////////////////////////////////////////
$( window ).resize(function() {
$('#js-viewport-breitenanzeiger').text("Viewport: " + $(window).width()/parseFloat($("body").css("font-size")) + "em");
});
});