使用 JavaScript 更改标签属性的值

change value of attributes of a tag using javascript

本文关键字：属性 标签 JavaScript 使用      更新时间：2023-09-26

我有以下由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;";
    }
});

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

当您要使用对节点的引用的 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测试）

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

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

dinnertime1.style.display="inline";
相关文章：