-1

複数のテキスト サイズを許可する Web サイトで問題が発生しています。切り替えを可能にするスクリプトが用意されており、すべてうまく機能しますが、機能を Cookie として保存していないため、ユーザーが別のページに移動するとテキストサイズがデフォルトになります。

私は JavaScript にあまり詳しくなく、Cookie についてもよくわかりません。

前もって感謝します。

これは私のスクリプトです：

function loadjscssfile(filename, filetype) {
    if (filetype == "js") { //if filename is a external JavaScript file
        var fileref = document.createElement('script')
        fileref.setAttribute("type", "text/javascript")
        fileref.setAttribute("src", filename)
    } else if (filetype == "css") { //if filename is an external CSS file
        var fileref = document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref != "undefined") document.getElementsByTagName("head")[0].appendChild(fileref)
}

function removejscssfile(filename, filetype) {
    var targetelement = (filetype == "js") ? "script" : (filetype == "css") ? "link" : "none" //determine element type to create nodelist from
    var targetattr = (filetype == "js") ? "src" : (filetype == "css") ? "href" : "none" //determine corresponding attribute to test for
    var allsuspects = document.getElementsByTagName(targetelement)
    for (var i = allsuspects.length; i >= 0; i--) { //search backwards within nodelist for matching elements to remove
        if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(targetattr).indexOf(filename) != -1) allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
    }
}

ボタンコード:

<a onClick="removejscssfile('/css/med-font.css', '/css/lrg-font.css', 'css');" href="javascript:loadjscssfile('/css/sml-font.css','css')" id="sml">A</a>
<a onClick="removejscssfile('/css/sml-font.css', '/css/lrg-font.css', 'css');" href="javascript:loadjscssfile('/css/med-font.css','css')" id="med">A</a>
<a onClick="removejscssfile('/css/med-font.css', '/css/sml-font.css', 'css');" href="javascript:loadjscssfile('/css/lrg-font.css','css')" id="lrg">A</a>
4

1 に答える 1

2

このページでは、最後に選択したスタイルシートのファイル名を保存し、Cookieに保存します。ロードされると、ページはCookieが存在するかどうかを確認し、それに応じてスタイルシートを変更します。

コンテンツはラッパーに含まれているため、読み込み時にスタイルが変更されてもブラウザのコンテンツに明らかな変更はありません。また、JavaScriptが有効になっていないユーザーでもページを表示できるように、noscriptタグがあります。

cookieコードとSameeraThilakasiriからのこのSO回答については、w3schoolsの功績によるものです。JQUERYを使用したcssファイルの追加/削除（ここではネイティブjsに固執していますが）

警告：すべてのブラウザでテストされているわけではありません。スクリプトはおそらくページ外に保持され、ページが完全に読み込まれたら開始する必要があります。

お役に立てれば！

<html>
<head>
    <link id="docStyleSheets" rel="stylesheet" href="default.css" type="text/css">
</head>
<body>
<noscript>
    <div id="divContentWrapper" style="display: none">
</noscript>
<ul id="ulCssChanges">
    <li><a href="#small" onclick="setFontSize('small.css');return false;")>Small</a></li>
    <li><a href="#medium" onclick="setFontSize('medium.css');return false;")>Medium</a></li>
    <li><a href="#large" onclick="setFontSize('large.css');return false;")>Large</a></li>
</ul>
<noscript>
    </div>
</noscript>

<script>
    var Cookies = {
        SetCookie: function (c_name, value, exdays) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
            document.cookie = c_name + "=" + c_value;
        },

        GetCookie: function (c_name) {
            var i, x, y, ARRcookies = document.cookie.split(";");
            for (i = 0; i < ARRcookies.length; i++) {
                x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
                y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
                x = x.replace(/^\s+|\s+$/g, "");
                if (x == c_name) {
                    return unescape(y);
                }
            }
        }
    }

    if (Cookies.GetCookie("fontSize") != "") {
        setFontSize(Cookies.GetCookie("fontSize"));
        if (document.getElementById("divContentWrapper") != null) { document.getElementById("divContentWrapper").style.display = "block"; }
    }

    function setFontSize(styleSheetName) {
        document.getElementById("docStyleSheets").href = styleSheetName;
        Cookies.SetCookie("fontSize", styleSheetName, 60);
        return false;
    }    
</script>

于 2012-07-27T13:44:55.603 に答える