Question

所以我正在为一个没有帮助的CMS进行重新设计，我没有完全访问标记（或ftp访问权限）。特别是有一个节点阻碍了我的进步 - 它采用内联风格和没有类或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支持（至少）。我没有使用框架，但可以访问标题。

提前致谢。

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

执行以下步骤：

获取文档中的所有div
使用内联样式设置
当你找到一张支票，看看后面是否有另一个div
如果下一个div是孩子
如果下一个div的className为"editablecontent"
然后，更改其背景颜色。

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

工作示例：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;
  }
}

然后，你可以简单地做到这一点，即使在旧版本的IE上也是如此：

var items = document.getElementsByClassName("editablecontent");
if (items.length) {
    items[0].parentNode.style.backgroundColor = "white";
}

使用javascript引用当前节点？

1 个答案: