Question

我试图使用javascript设置div元素的某些属性，但未设置这些属性，我在浏览器中使用了检阅模式，它说：未捕获的TypeError：无法读取未定义的属性“样式”

我已经尝试使用ID属性来获取元素，甚至使用querySelector方法，但没有任何改变

<body>
    <div id="app">
        <div class="box"></div>
    </div>

    <script>
        var boxElement = document.getElementsByClassName('.box')[0];

        boxElement.style.width = 100;
        boxElement.style.height = 100;
        boxElement.style.backgroundColor = '#f00';
    </script>
   </body>

Answer 1

getElementByClassName表示选择器的名称是一个类，因此您不需要在其前面加点。与您不需要＃和getElementById相同。

var boxElement = document.getElementsByClassName('box')[0];

编辑：正如其他人已经指出的那样，不需要getElementByClassName()函数，您可以只使用querySelector()函数来避免结果为数组。

Answer 2

语法不正确。删除.中的getElementsByClassName('.box')。

如果您想使用类选择器，则可以使用document.querySelectorAll('.box')

Answer 3

使用此名称（通过ID名称）：

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../packages/core/main.css' rel='stylesheet' />
<link href='../packages/daygrid/main.css' rel='stylesheet' />
<link href='../packages/timegrid/main.css' rel='stylesheet' />
<script src='../packages/core/main.js'></script>
<script src='../packages/interaction/main.js'></script>
<script src='../packages/daygrid/main.js'></script>
<script src='../packages/timegrid/main.js'></script>    

<script>
document.addEventListener('DOMContentLoaded', OpenProgram);

function OpenProgram()
{
    StartCalendar();
}

function StartCalendar()
{  
console.log("here");
       //document.getElementById("calendar").style.visibility = "visible"; 
       DrawCalendar1();
      //bottomButtons(); 
}

function DrawCalendar1()
{
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay'
      },
      defaultDate: '2019-08-12',
      navLinks: true, // can click day/week names to navigate views
      selectable: true,
      selectMirror: true,
      select: function(arg) {
        var title = prompt('Event Title:');
        if (title) {
          calendar.addEvent({
            title: title,
            start: arg.start,
            end: arg.end,
            allDay: arg.allDay
          })
        }
        calendar.unselect()
      },
      editable: true,
      eventLimit: true, // allow "more" link when too many events
      events: [
        {
          title: 'All Day Event',
          start: '2019-08-01'
        },
        {
          title: 'Long Event',
          start: '2019-08-07',
          end: '2019-08-10'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2019-08-09T16:00:00'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2019-08-16T16:00:00'
        },
        {
          title: 'Conference',
          start: '2019-08-11',
          end: '2019-08-13'
        },
        {
          title: 'Meeting',
          start: '2019-08-12T10:30:00',
          end: '2019-08-12T12:30:00'
        },
        {
          title: 'Lunch',
          start: '2019-08-12T12:00:00'
        },
        {
          title: 'Meeting',
          start: '2019-08-12T14:30:00'
        },
        {
          title: 'Happy Hour',
          start: '2019-08-12T17:30:00'
        },
        {
          title: 'Dinner',
          start: '2019-08-12T20:00:00'
        },
        {
          title: 'Birthday Party',
          start: '2019-08-13T07:00:00'
        },
        {
          title: 'Click for Google',
          url: 'http://google.com/',
          start: '2019-08-28'
        }
      ]
    });

    calendar.render();
}
</script>
<style>

  body {
    margin: 40px 10px;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width: 900px;
    margin: 0 auto;
  }

</style>
</head>
<body>
  <div id='calendar'></div>
</body>
</html>

HTML：

document.getElementById('box').setAttribute("style", "width:100px;height:100px;background-color:#f00;");

或使用此名称（按类名称）：

<div id="app">
    <div id="box"></div>
</div>

HTML：

document.getElementsByClassName('box')[0].setAttribute("style", "width:100px;height:100px;background-color:#f00;");

Answer 4

<script>
    var boxElement = document.querySelector('.box')

    boxElement.style.width = '100px'
    boxElement.style.height = '100px'
    boxElement.style.backgroundColor = '#f00'
</script>

这是我对问题的解决方案，他需要在CSS代码后使用“ px”

Uncaught TypeError：无法读取javascript中未定义的属性“ style”

4 个答案: