2

そこで、マークアップ (または ftp アクセス) への完全なアクセス権がない役に立たない CMS を使用するサイトの再設計を行っています。特に私の進行を著しく妨げているノードがあります - インラインスタイルで書かれており、クラスやIDがなく、それを変更する必要があります(削除しないでください)。そのように見える：

<div style="background-color: blue">
<div class="editablecontent">
(stuff I can edit in the CMS goes here)
</div>
</div>

ここで getElementsByClassName が機能するとは思いませんか? しかし、空の div を ID で非常に醜く定義し、 document.getElementById.parentNode.parentNode.style.backgroundColor="white" を定義するのはどのような作業でしょうか。これは明らかに不潔で、とにかく IE では機能しません。 （少なくとも）。私はフレームワークを使用していませんが、ヘッダーにアクセスできます。

前もって感謝します。

4

1 に答える 1

4

このコンテンツがドキュメント内で一意であると仮定すると（たとえば、コンテンツが1つしかない場合）、これを使用してコンテンツを見つけることができます。

function changeColor() {
    var divs = document.getElementsByTagName("div");
    for (var i = 0, len = divs.length; i < len; i++) {
        if (divs[i].style.backgroundColor === "blue" && 
          divs[i + 1] && 
          divs[i + 1].parentNode === divs[i] &&
          divs[i + 1].className === "editablecontent") {
            divs[i].style.backgroundColor = "white";
            return;
        }
    }
}

これにより、次の手順が実行されます。

  1. ドキュメント内のすべてのdivを取得します
  2. インラインスタイル設定でbackgroundColorが青に設定されているものを探します
  3. 1つのチェックを見つけたら、その後に別のdivがあるかどうかを確認します
  4. その次のdivが子の場合
  5. その次のdivclassNameに"editablecontent"
  6. 次に、背景色を変更します。

適切なオブジェクトを見つけていることを確認するために他の基準に基づいてさらにチェックが必要な場合は、それらをロジックに追加できますが、これらのチェックはすべて私たちに開示したものです。

実例： http： //jsfiddle.net/jfriend00/NmxUn/

もう1つのアプローチは、getElementsByClassNameこのようなポリフィルを使用してインストールし、古いブラウザーで機能させることです。

// Add a getElementsByClassName function if the browser doesn't have one
// Limitation: only works with one class name
// Copyright: Eike Send http://eike.se/nd
// License: MIT License

if (!document.getElementsByClassName) {
  document.getElementsByClassName = function(search) {
    var d = document, elements, pattern, i, results = [];
    if (d.querySelectorAll) { // IE8
      return d.querySelectorAll("." + search);
    }
    if (d.evaluate) { // IE6, IE7
      pattern = ".//*[contains(concat(' ', @class, ' '), ' " + search + " ')]";
      elements = d.evaluate(pattern, d, null, 0, null);
      while ((i = elements.iterateNext())) {
        results.push(i);
      }
    } else {
      elements = d.getElementsByTagName("*");
      pattern = new RegExp("(^|\\s)" + search + "(\\s|$)");
      for (i = 0; i < elements.length; i++) {
        if ( pattern.test(elements[i].className) ) {
          results.push(elements[i]);
        }
      }
    }
    return results;
  }
}

そして、古いバージョンのIEでも、これを簡単に行うことができます。

var items = document.getElementsByClassName("editablecontent");
if (items.length) {
    items[0].parentNode.style.backgroundColor = "white";
}
于 2012-09-23T23:33:07.167 に答える