Question

我在Drupal中创建了一个视图。我正在使用JavaScript来修改每一行中的CSS。该脚本在第一行上运行，但不会对视图中的其余行进行更改。

这是剧本：

<script language="javascript" type="text/javascript">

window.onload = floatbr;

function floatbr() {

var f = document.getElementById('firstright') // Get div element
var s = document.getElementById('secondright') // Get div element
var w = document.getElementById('catwrapper') // Get div element
var sh = s.offsetHeight // secondright div height
var wh = w.offsetHeight // catwrapper div height
f.style.height = wh - sh + 'px'; }

</script>

我在此页面中使用它：http://agsone.100webcustomers.com/floatbottom.php

在页面中有一次脚本不能解决问题。在视图页脚中使用脚本并重复脚本不起作用。

带有HTML，CSS和JavaScript的jSfiddle链接如下：http://jsfiddle.net/YTN3K/。

Answer 1

Drupal提供并已使用jQuery，因此您也应该使用它。 Drupal有own way to manage JavaScript并附带一些额外的JavaScript API，主要用于处理从PHP到JavaScript的传递变量，注册脚本以在页面加载和内容添加等方面运行。

jQuery有很好的文档和流行，因此查找文档，教程和howto很容易。它自己的documentation页面是一个良好的开端。但它需要基本了解XHTML文档是什么以及它是如何构建的。

Answer 2

很难从你的问题和标记中找出你正在尝试做的事情，所以这里有一些一般信息可以帮助你：

您当前使用的功能getElementById会返回单个元素：页面上带有id值的元素。（id值必须在页面上是唯一的。）

要处理多个元素，您有几个选择。两个最受欢迎的：

您可以从给定元素开始，然后使用其childNodes，firstChild，nextSibling和类似属性从其导航到附近的其他元素。
您可以使用getElementsByTagName（在document或元素上）查找具有给定标记的该容器中的所有元素（包括几个级别的元素）。例如，document.getElementsByTagName("p")会在页面上为您提供NodeList 所有段落。

这些是“DOM”（文档对象模型）的属性和方法，它是浏览器在解析和呈现HTML时创建的元素和相关信息的树。

参考文献：

这是一个显示一些非常基本的操作（live copy）的例子：

HTML：

<div id="justOneDiv">I'm the <code>justOneDiv</code> element. I'm unique on the page. JavaScript code on the page turned me red.</div>
<div id="container">I'm a container called "container" with <span>various</span> <code>span</code> elements. <span>Code</span> on the <span>page</span> has made all of the <code>span</code> elements in this container <span>bold</span>.</div>
<div>I'm a container with <span>various</span> <code>span</code> elements. <span>Note</span> that the <code>span</code> elements are <span>not</span> bold, because I'm <span>not</span> in the container above.</div>
<div>I'm a <code>div</code> with no class.</div>
<div class="foo">I'm a <code>div</code> with class "foo". Code on the page turned me blue.</div>
<div class="bar">I'm a <code>div</code> with class "bar". Code on the page turned me green.</div>
<div>Another classless <code>div</code></div>
<div class="foo other">Another "foo", also with class "other"</div>
<div class="bar">Another "bar"</div>
<div>Another classless <code>div</code></div>
<div class="foo">Another "foo"</div>
<div class="bar test">Another "bar", also with class "test"</div>
<div>Another classless <code>div</code></div>
<div class="foo">Another "foo"</div>
<div class="bar">Another "bar"</div>
<div>Another classless <code>div</code></div>
<div class="foo">Another "foo"</div>
<div class="bar">Another "bar"</div>

JavaScript的：

(function() {

  hookEvent(window, "load", go);

  function go() {
    var list, index, div, container;

    // Get just the one element, turn it red
    document.getElementById("justOneDiv").style.color = "red";

    // Get the spans within the specific container
    container = document.getElementById("container");
    list = container.getElementsByTagName("span");

    // Loop through making those spans bold
    for (index = 0; index < list.length; ++index) {
      list.item(index).style.fontWeight = "bold";
    }

    // Get a NodeList of all divs on the page
    list = document.getElementsByTagName("div");

    // Loop it, turning "foo"s blue and "bar"s green
    for (index = 0; index < list.length; ++index) {
      div = list.item(index);
      if (/\bfoo\b/.test(div.className)) {
        div.style.color = "blue";
      }
      else if (/\bbar\b/.test(div.className)) {
        div.style.color = "green";
      }
    }
  }

  function hookEvent(element, eventName, handler) {
    // Very quick-and-dirty, recommend using a proper library,
    // this is just for the purposes of the example.
    if (typeof element.addEventListener !== "undefined") {
      element.addEventListener(eventName, handler, false);
    }
    else if (typeof element.attachEvent !== "undefined") {
      element.attachEvent("on" + eventName, handler);
    }
    else {
      element["on" + eventName] = handler;
    }
  }
})();

附注：通过利用任何体面的JavaScript库（如jQuery，Prototype，YUI，Closure提供的实用程序功能，可以大大简化上述操作，或any of several others。

例如，使用相同的HTML，这里是使用jQuery获得相同结果的JavaScript代码（live copy）：

jQuery(function($) {

  // Get just the one element, turn it red
  $("#justOneDiv").css("color", "red");

  // Get the spans within the specific container
  // Loop through making those spans bold
  $("#container span").css("font-weight", "bold");

  // Turn all divs with the class "foo" blue
  $("div.foo").css("color", "blue");

  // Turn all divs with the class "bar" green
  $("div.bar").css("color", "green");
});

DOM是官方API;像jQuery这样的库提供了替代或增强的API。它们非常有用且功能强大，但我建议您对DOM本身有一些了解，即使您使用库并最终很少直接将代码写入DOM API。

为视图中的每一行重复javascript

2 个答案: