使用javascript更改标记属性的值

我有以下由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>

…单选按钮div标签在这里
…单选按钮div标签在这里

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

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;";
    }
});

window.onload=（函数（）{
var today=新日期（）；
var day=today.getDay（）；
var hour=today.getHours（）；
var午餐时间1=document.getElementById（'webform-component-午餐集'）；
var午餐时间2=document.getElementById（'webform-component-午餐集--午餐'）；
var dinnertime1=document.getElementById（'webform-component-dinnerset'）；
var dinnertime2=document.getElementById（'webform-component-dinnerset--dinner'）；
如果（小时>=15和小时<22）{
午餐时间1.style=“显示：无；”；
午餐时间2.style=“显示：无；”；
晚餐时间1.style=“”；
晚餐时间2.style=“”；
sundaytime1.style=“显示：无；”；
}
});

不知道为什么它不起作用，如果有任何帮助，我们将不胜感激。提前谢谢你

我认为

style=”“

是不可能的。您必须编写

午餐时间1.style.display=“无”

。样式是一个“完整”的js对象

dinnertime1.style.display="inline";

---

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

当您想使用节点引用的

样式
属性时，您使用的是DOM API。DomeElement对象有一个名为
style
的属性，该属性也必须是对象。因此，要么写：

lunchtime1.style.display = 'none';

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

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

这应该可以解决问题

注：

正如Tim Down所指出的，旧的IE不具备优秀的浏览器，所以第一种方法是最可靠的。我正在调查这件事。IE不允许您编写
someNode.setAttribute（'onclick'，'clickHandler（）'）例如

我还遇到了一些似乎只影响某些元素（通常是表单元素）的问题，但是当涉及到设置样式属性时，我不能确定。。。您不能设置某些属性，或者无法在某些元素上设置任何属性。无论什么一旦我了解更多，我会更新这个答案。（目前没有windows框，因此没有要测试的IE）
给出异常或错误的详细信息？OP为什么要使用jQuery？有些人只是想学习JavaScript本身。。。此外，对于这样简单的事情，jQuery只是添加了无意义的块。设置样式属性相当于X-browser，速度稍微快一点，实际上需要更少的代码。依我看，越少越好，DOM的速度也就越慢is@EliasVanOotegem为什么是jQuery？我喜欢不必考虑浏览器版本/错误/差异/。。。比我现在还需要做的更多——css支持和其他“不同的方法”需要我的关注。即使在这个简单的例子中，你也会像你在回答中提到的那样跨越这些问题。至于速度。。。你说得对，但我认为jQuery更容易实现可维护性/兼容性（视图可能不同）。如果某个目标设备上页面的某个部分速度非常慢，请对其进行优化，否则可能会导致过早优化。@Warappa：我完全了解jQuery的好处，也可能不完全了解，但我肯定能看到这样做的理由。我对jQuery的主要问题是人们很快就会转向它。也学习JavaScript，您将能够从jQuery中获得更多，毕竟它是JS。尽管这里的一些人似乎认为jQuery是一种独立的语言。您谈到优化代码：当您熟悉jQuery语言时，优化您的jQuery代码会变得容易得多。后者（使用
setAttribute（）
）在旧的IE中不起作用，因为它的
setAttribute（）
实现已损坏，所以前者更好。@TimDown:谢谢提醒！我似乎记得IE8确实支持
setAttribute
方法，但现在我想起来了，我似乎记得有些特定节点不受支持（
突然想到，IE中总是很麻烦）。快速的谷歌搜索告诉我，
setAttribute
确实不能与事件处理程序一起工作。如果你能为我提供一个更全面的主题链接，你能粘贴它吗？无论如何，我将编辑我的答案问题是旧IE
setAttribute（）
属性直接映射到属性，因此尝试设置
style
属性会尝试替换
style
属性，这是不允许的。这里有一个合理的描述：谢谢。快速响应和丰富的信息。我试过了，但似乎没有效果。看看HTML和JS@sridharpanduragiah：据我所知，它确实有效，不过。。。也许你应该澄清一下你期望看到的是什么……对不起，我看得不够仔细：-s