「javascriptで外部CSSを一つのボタンで動的にon/offでき、その情報をクッキーに保存する、というサンプルを探しています。
ご存知でしたらご教示ください。」
追加要件
・ボタンを押したらサイト全体のCSSが変わる
・動作はIE6以上firefox2以上OPERA9以上
No.3
426
81
50pt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> <!-- var CSSPath = './test.css' ; // CSS ファイルのパス var outerCSS ; function toggleCSS() { outerCSS.disabled = !outerCSS.disabled ; document.cookie = 'outercss = ' + !outerCSS.disabled ; } function getCookie(key) { var cookies = document.cookie.split(';') ; for (var i = 0; i < cookies.length; ++i) { var theCookie = cookies[i].split('=', 2) ; if (theCookie[0] == key) return unescape(theCookie[1]) ; } return undefined ; } onload = function() { outerCSS = document.createElement('link') ; with (outerCSS) { rel = 'stylesheet' ; type = 'text/css' ; href = CSSPath ; } document.getElementsByTagName('head')[0].appendChild(outerCSS) ; outerCSS.disabled = true ; if (getCookie('outercss') == 'true') toggleCSS() ; } //--> </script> </head> <body> <form> <input type="button" onclick="toggleCSS();" value="css ON-OFF" /> </form> </body> </html>
No.1
405
3pt
この辺りのサンプルはどうでしょうか。
http://hyper-text.org/archives/2007/10/css_switch.shtml
対応ブラウザ的にも要件を満たしていそうです。
ありがとうございます。
一つのボタンで動的にon/offしたいです。
No.2
42681
27pt
改変してみました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="./test.css" id="mycss" /> <style type="text/css"> </style> <script type="text/javascript"> <!-- var isOuterCSS = true ; var outerCSS ; function toggleCSS() { isOuterCSS = !isOuterCSS ; outerCSS.disabled = !isOuterCSS ; document.cookie = 'outercss = ' + isOuterCSS ; } function getCookie(key) { var cookies = document.cookie.split(';') ; for (var i = 0; i < cookies.length; ++i) { var theCookie = cookies[i].split('=', 2) ; if (theCookie[0] == key) return unescape(theCookie[1]) ; } return undefined ; } onload = function() { outerCSS = document.getElementById('mycss') ; if (getCookie('outercss') == 'false') toggleCSS() ; } //--> </script> </head> <body> <form> <input type="button" onclick="toggleCSS();" value="css ON-OFF" /> </form> </body> </html>
度々ありがとうございます
最高です！
最高ついでにもう一つだけお願いします。
デフォルトをCSSオフにするにはどうしたらよいでしょうか
No.3
42681
ここでベストアンサー
50pt
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> <!-- var CSSPath = './test.css' ; // CSS ファイルのパス var outerCSS ; function toggleCSS() { outerCSS.disabled = !outerCSS.disabled ; document.cookie = 'outercss = ' + !outerCSS.disabled ; } function getCookie(key) { var cookies = document.cookie.split(';') ; for (var i = 0; i < cookies.length; ++i) { var theCookie = cookies[i].split('=', 2) ; if (theCookie[0] == key) return unescape(theCookie[1]) ; } return undefined ; } onload = function() { outerCSS = document.createElement('link') ; with (outerCSS) { rel = 'stylesheet' ; type = 'text/css' ; href = CSSPath ; } document.getElementsByTagName('head')[0].appendChild(outerCSS) ; outerCSS.disabled = true ; if (getCookie('outercss') == 'true') toggleCSS() ; } //--> </script> </head> <body> <form> <input type="button" onclick="toggleCSS();" value="css ON-OFF" /> </form> </body> </html>
結構書き直していただいたみたいですみませんでした。
ありがとうございました！！
2
60
59
結構書き直していただいたみたいですみませんでした。
ありがとうございました！！