Question

我正在尝试使用基本的DOM操作练习JavaScript，但我一直遇到2个错误：

1.SyntaxError：缺失;在陈述之前

2.TypeError：size不是函数

function size() {
  var height = document.body.getElementById('hover1').style.height: 500 px;
  var width = document.body.getElementById('hover1').style.width: 500 px;
}
console.log(hover);

<!DOCTYPE html>
<html>
<head>
  <title>javascript practice</title>
  <meta charset="utf-8" />
  <style>
    body {
      margin: 7em auto;
      background-color: green;
      width: 90%;
    }
    
    #size1 {
      background-color: blue;
      width: 150px;
      height: 150px;
      margin: 3em auto;
    }
  </style>
</head>
<body>
  <div id="size1"></div>
  <input type="button" value="size" onclick="size();">
</body>

Answer 1

你的错误在这里：

var height = document.body.getElementById('hover1').style.height: 500px;
var width = document.body.getElementById('hover1').style.width: 500px;
// -------------------^  and -------------------------------------^

用这些替换这些行：

var height = document.getElementById('hover1').style.height;
var width = document.getElementById('hover1').style.width;

Answer 2

没有任何名为document.body.getElementById的内容，而是将其更改为document.getElementById，如下所示

var height = (document.getElementById('hover1'))?document.getElementById('hover1').style.height: "500px";
var width = (document.getElementById('hover1'))?document.getElementById('hover1').style.width: "500px";

function size1() {
console.log("test")
var height = (document.getElementById('hover1'))?document.getElementById('hover1').style.height: "500px";
var width = (document.getElementById('hover1'))?document.getElementById('hover1').style.width: "500px";

 }



    //console.log(hover);

<!DOCTYPE html>
<html>
<head>
<title>javascript practice</title>
<meta charset="utf-8"/>

<style>

  body {
    margin: 7em auto;
    background-color: green; 
    width: 90%;
  }

  #size1 {
    background-color: blue; 
    width: 150px;
    height: 150px;
    margin: 3em auto;
  }

</style>
  </head>
  <body>

<div id="size1">



</div>

   <input type="button" value="size" onclick="size1()">

   </body>

Answer 3

如果您要设置元素的高度并将高度指定为var height，则需要执行以下操作：

var height = document.getElementById("size1").style.height = "500px";

如果您要将元素的高度指定为var height，则需要执行以下操作：

var height = document.getElementById("size1").style.height;

如果你只想设置元素的高度，那么你只需要这样做：

document.getElementById("size1").style.height = "500px";

您还应该在500px上加上引号，因为数字周围不需要" "，但是一旦添加了文字......这一切都变成了文本。因此，无论哪种方式，您都应该"500px"

我也会按下这个按钮：

<button type="button" value="size" onclick="size()">Size</button>

基于这样的信念，即您试图通过Size按钮点击div更大，那么您应该拥有以下内容：

样式

body {
    margin: 7em auto;
    background-color: green;
    width: 90%;
}

#size1 {
    background-color: blue;
    width: 150px;
    height: 150px;
    margin: 3em auto;
}

HTML

<div id="size1"></div>

<button type="button" value="size" onclick="size()">Size</button>

的JavaScript

function size() {
  document.getElementById('size1').style.height = "500px";
  document.getElementById('size1').style.width = "500px";
}

为什么我的JavaScript出错？

3 个答案: