0

我有 Drupal 生成的以下 HTML

<fieldset id="webform-component-lunchset" class="webform-component-fieldset form-wrapper" style="">
    <div id="webform-component-lunchset--lunch" class="form-item webform-component webform-component-radios webform-container-inline" style="">
        ...Radio Button div tags here
    </div>
</fieldset>
<fieldset id="webform-component-dinnerset" class="webform-component-fieldset form-wrapper" style="display: none;">
    <div id="webform-component-dinnerset--dinner" class="form-item webform-component webform-component-radios webform-container-inline" style="display: none;">
        ...Radio Button div tags here
    </div>
</fieldset>

我的意图是允许用户根据他开始预订时的一天中的时间来选择用餐时间。为此，我注意到我必须更改 style="display: none;" 对于我要隐藏的字段集，而 style="" 对于我要显示的字段集。我有以下 Javascript 语句来更改 DIV 标记的样式属性，但它似乎不起作用。任何帮助，将不胜感激。

window.onload = (function() { 
    var today = new Date();
    var day = today.getDay();
    var hour = today.getHours();
    var lunchtime1 = document.getElementById('webform-component-lunchset');
    var lunchtime2 = document.getElementById('webform-component-lunchset--lunch');
    var dinnertime1 = document.getElementById('webform-component-dinnerset');
    var dinnertime2 = document.getElementById('webform-component-dinnerset--dinner');
    if (hour >= 15 && hour < 22) {
        lunchtime1.style="display: none;";
        lunchtime2.style="display: none;";
        dinnertime1.style=" ";
        dinnertime2.style=" ";
        sundaytime1.style="display: none;";
    }
});

不知道为什么它不起作用，将不胜感激任何帮助。先感谢您

4

3 回答 3

1

当您想使用对style节点的引用的属性时，您正在使用 DOM API。DOMElement 对象有一个名为 的属性，style它也必须是一个对象。所以要么写：

lunchtime1.style.display = 'none';

或者使用该setAttribute方法 - 这样您就可以一次性设置整个样式属性：

lunchtime1.setAttribute('style','display: block; background-color: #F00;');

这应该够了吧...

注意：
正如 Tim Down 所指出的，旧的 IE 的setAttribute表现不如像样的浏览器，所以第一种方法是最可靠的。我正在调查此事。例如，IE 不允许您编写someNode.setAttribute('onclick', 'clickHandler()');。
我也遇到过似乎只影响某些元素（通常是表单元素）的问题，但是在设置样式属性时，我不能确定......要么你不能设置某些属性，要么你可能无法在某些元素上设置任何属性。无论如何...一旦我对此有所了解，我将更新此答案。（目前没有 Windows 框，所以没有 IE 来测试）

于 2013-01-25T12:20:50.467 回答
0 
dinnertime1.style.display="inline";
于 2013-01-25T12:19:23.483 回答
0

我认为style="<string>"是不可能的。你必须写lunchtime1.style.display = "none"。Style 是一个“完整”的 js 对象。

无论如何，有理由不使用 jQuery 吗？

于 2013-01-25T12:19:36.760 回答