Question

我有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;”对于我要隐藏的字段集和我要显示的那个样式=“”。我有以下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;";
    }
});

不确定为什么它不起作用，不胜感激任何帮助。提前谢谢

Answer 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()');。
我也遇到了似乎只影响某些元素（通常是表单元素）的问题，但是当涉及到设置样式属性时，我无法确定...要么你不能设置某些属性，要么你可能无法在某些元素上设置任何属性。无论如何......一旦我了解了这个，我就会更新这个答案。（目前没有窗框，所以没有IE测试）

Answer 2

dinnertime1.style.display="inline";

Answer 3

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

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

使用javascript更改标记属性的值

3 个答案: