Phiên bản đầy đủ: jsB@nk » Ứng dụng » Thay đổi kiểu
URL: https://www.javascriptbank.com/change-style-index.html
Hãy dùng hiệu ứng JavaScript này để cho phép người dùng thay đổi các kiểu định dạng dữ liệu trên trang web của bạn qua việc cho phép họ chọn các tập tin CSS khác nhau.
Phiên bản đầy đủ: jsB@nk » Ứng dụng » Thay đổi kiểu
URL: https://www.javascriptbank.com/change-style-index.html
<script type="text/javascript"><!--// Created by: Pascal Vyncke :: http://www.SeniorenNet.be// These are the variables; you can change these if you wantvar expDays = 9999; // How many days to remember the settingvar standardStyle = '2'; // This is the number of your standard style sheet; this will be used when the user did not do anything.var nameOfCookie = 'switchstyle'; // This is the name of the cookie that is used.var urlToCSSDirectory = ''; // This is the URL to your directory where your .css files are placed on your site. For example: http://www.seniorennet.be/URL_TO_STYLESHEET_DIRECTORY_OF_YOUR_SITE/// These are the names of your different .css files; use the name exactly as on your Web sitevar ScreenCSS_1 = 'screen_1.css';var ScreenCSS_2 = 'screen_2.css';var ScreenCSS_3 = 'screen_3.css';var ScreenCSS_4 = 'screen_4.css';var ScreenCSS_5 = 'screen_5.css';// If you use different .css files for printing a document, you can set these. If you don't even know what this is, name then everything exactly the same as above.// So: make then PrintCSS_1 the same as ScreenCSS_1, for example "screen_1.css".var PrintCSS_1 = 'print_1.css';var PrintCSS_2 = 'print_2.css';var PrintCSS_3 = 'print_3.css';var PrintCSS_4 = 'print_4.css';var PrintCSS_5 = 'print_5.css';/***********************************************************************************************DO NOT CHANGE ANYTHING UNDER THIS LINE, UNLESS YOU KNOW WHAT YOU ARE DOING***********************************************************************************************/// This is the main function that does all the workfunction switchStyleOfUser(){var fontSize = GetCookie(nameOfCookie);if (fontSize == null) {fontSize = standardStyle;}if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ' ' + ScreenCSS_1 + '" media="screen">'); }if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_2 + '" media="screen">'); }if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_3 + '" media="screen">'); }if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_4 + '" media="screen">'); }if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + ScreenCSS_5 + '" media="screen">'); }if (fontSize == "1") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_1 + '" media="print">'); }if (fontSize == "2") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_2 + '" media="print">'); }if (fontSize == "3") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_3 + '" media="print">'); }if (fontSize == "4") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_4 + '" media="print">'); }if (fontSize == "5") { document.write('<link rel="stylesheet" type"text/css" href="' + urlToCSSDirectory + PrintCSS_5 + '" media="print">'); }var fontSize = "";return fontSize;}var exp = new Date();exp.setTime(exp.getTime() + (expDays*24*60*60*1000));// Function to get the settings of the userfunction getCookieVal (offset) {var endstr = document.cookie.indexOf (";", offset);if (endstr == -1)endstr = document.cookie.length;return unescape(document.cookie.substring(offset, endstr));}// Function to get the settings of the userfunction GetCookie (name) {var arg = name + "=";var alen = arg.length;var clen = document.cookie.length;var i = 0;while (i < clen) {var j = i + alen;if (document.cookie.substring(i, j) == arg)return getCookieVal (j);i = document.cookie.indexOf(" ", i) + 1;if (i == 0) break;}return null;}// Function to remember the settingsfunction SetCookie (name, value) {var argv = SetCookie.arguments;var argc = SetCookie.arguments.length;var expires = (argc > 2) ? argv[2] : null;var path = (argc > 3) ? argv[3] : null;var domain = (argc > 4) ? argv[4] : null;var secure = (argc > 5) ? argv[5] : false;document.cookie = name + "=" + escape (value) +((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +((path == null) ? "" : ("; path=" + path)) +((domain == null) ? "" : ("; domain=" + domain)) +((secure == true) ? "; secure" : "");}// Function to remove the settingsfunction DeleteCookie (name) {var exp = new Date();exp.setTime (exp.getTime() - 1);var cval = GetCookie (name);document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();}// This function is used when the user gives his selectionfunction doRefresh(){location.reload();}// This will call the main function. Do not remove this, because otherwise this script will do nothing...document.write(switchStyleOfUser());--></script><script type="text/javascript" src="changeStyle.js"></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><h2>Choose your style!</h2><p><input type="radio" name="grootte" value="1" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 1<br><input type="radio" name="grootte" value="2" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 2<br><input type="radio" name="grootte" value="3" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 3<br><input type="radio" name="grootte" value="4" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 4<br><input type="radio" name="grootte" value="5" onclick="SetCookie(nameOfCookie, this.value, exp); doRefresh();"> Style 5<br></p><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->
http://javascriptbank.com/javascript/utility/Change_Style/screen2.csshttp://javascriptbank.com/javascript/utility/Change_Style/screen_1.csshttp://javascriptbank.com/javascript/utility/Change_Style/screen_2.csshttp://javascriptbank.com/javascript/utility/Change_Style/screen_3.csshttp://javascriptbank.com/javascript/utility/Change_Style/screen_4.css