2

因此，我正在为一个没有完全访问标记（或 ftp 访问）的无用 CMS 的站点进行重新设计。特别是有一个节点严重阻碍了我的进步——它是用内联样式编写的，没有类或 ID，我必须更改它（而不是删除它）。它看起来像：

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

我不认为 getElementsByClassName 会在这里工作吗？但是什么样的作品是非常丑陋的定义一个带有 ID 的空 div 然后 document.getElementById.parentNode.parentNode.style.backgroundColor="white" 这显然是肮脏的，无论如何在 IE 中都不起作用，我需要 IE8 支持（至少）。我没有使用框架，但可以访问标题。

提前致谢。

4

1 回答 1

4

假设此内容在您的文档中是唯一的（例如，只有其中一个），您可以使用它来查找它：

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. 当您找到一个检查以查看其后是否有另一个 div
  4. 如果下一个 div 是一个孩子
  5. 如果下一个 div 有className一个"editablecontent"
  6. 然后，更改其背景颜色。

如果您希望根据其他标准进行任何进一步的检查以确保您找到了正确的对象，您可以将这些检查添加到逻辑中，尽管这些检查是您向我们披露的全部内容。

工作示例：http: //jsfiddle.net/jfriend00/NmxUn/

另一种方法是使用getElementsByClassName并安装一个像这样的 polyfill 以使其在旧浏览器中工作：

// 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;
  }
}

And, then you could simply do this, even on older versions of IE:

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