0

<body>一貫したクラスを必要とする複数のページと、ページごとに一意のクラスがあります。これらの値を動的に設定して、ページ レベルでの定数クラスの管理をなくしたいと考えています。

理想的な解決策は、空の<body>タグで開始することです。この場合、作成された JavaScript により、必要に応じてクラスを挿入できます。潜在的なプロパティは次のとおりです。

tabClass, catClass, secClass, pageClass

これらの任意の組み合わせが存在する可能性があり、まったく存在しない場合もあります。誰でもこれで私を助けることができますか？私はJavascriptの学習の初期段階にあるため、無知であることをお詫びします。ありがとう。

理想的な出力は次のようになります。

bodyClasses = (tabClass, catClass, secClass)
pageClass = (pageClass)
4

2 に答える 2

2

<body>開始タグの後のスクリプト要素：

var commonClasses = "tabClass catClass secClass",
    currentPageClasses;

/* Your own logic here to determine what classes apply to the
   current page, add them to currentPageClasses variable */

document.getElementsByTagName("body")[0].className += " "
                                                   + commonClasses
                                                   + " "
                                                   + currentPageClasses;

デモ： http： //jsfiddle.net/nnnnnn/FhMP8/

于 2012-09-19T05:29:31.063 に答える
0

次のような関数が必要なようです。

var util = util || {};

util.trim = function(s) {
  return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}

util.dom = util.dom || {};

util.dom.hasClassName = function(el, cName) {
    if (typeof el == 'string') el = document.getElementById(el);

    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
    return el && re.test(el.className);
}

util.dom.addClassName = function(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (!util.dom.hasClassName(el, cName)) {
        el.className = util.trim(el.className + ' ' + cName);
    }
}

util.dom.addClassNames = function(el) {

    if (typeof el == 'string') el = document.getElementById(el);

    for (var i=1, iLen=arguments.length; i<iLen; i++) {
      util.dom.addClassName(el, arguments[i]);
    }
}

util.dom.removeClassName = function(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (util.dom.hasClassName(el, cName)) {
        var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
        el.className = util.trim(el.className.replace(re, ''));
    }
}

そして、それらを次のように使用します。

var body = document.body;
util.dom.addClassName(body, 'tabClass');

addClassNames 関数は複数の引数を取ります。

util.dom.addClassNames(body, 'tabClass', 'catClass', 'secClass');

要素が既にクラスを持っている場合、2 回目は追加されないことに注意してください。

于 2012-09-19T05:42:01.767 に答える