Question

当我点击img

时，我继续在firefox上的控制台中获取ReferenceError: toggleExpand is not defined

我试图让图像放大，在点击中浮动中心屏幕，没有jquery，纯javascript，html，css。

HTML

<body>
  <script type="text/javascript">
    function toggleExpand(id){
      var doc = document.getElementById(id);
      doc.style.z-index = "1";
      doc.style.width = "512px";
      doc.style.align = "center";
    }
  </script>
  <img id="img1" onclick="toggleExpand('img1');" src="I:\Images\image.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0"/>
</body>

Answer 1

这是我用过的代码，可以用这个

<html>
    <head>
       <script>
           function toggle(){
               var doc = document.getElementById("divSection");

                    doc.style.z-index = "1";
                    doc.style.width = "512px";
                   doc.style.align = "center";
          }
       </script>
    </head>

    <body>
        <p>Click the button to trigger a function.</p>
        <p class="button" onclick="toggle()">Show/hide</p>

    </body>
</html>

Answer 2

首先，属性不能包含-
所以将其更改为CamelCase zIndex或括在括号["z-index"]中

<小时/> 另外，奇怪的没有人提到，无需传递ID！您已经对点击的引用HTMLIMGElement有this引用，
是的，只使用onclick="toggleExpand(this);"而不使用ID

另外，我看到你将你的功能命名为TOGGLE...，所以让我们切换！

img[onclick]{vertical-align:top; cursor:pointer; }

<script>
  function toggleExpand(el){
    var io = el.tog ^= 1;                 // Store the toggle state
    el.style.zIndex = io ? 1 : 0;
    el.style.width = (io ? 256 : 128) +"px";
  }
</script>

<img onclick="toggleExpand(this);" src="https://www.gravatar.com/avatar/6edc0ac8cd9f3e790389f3284eaaf9e9?s=32&d=identicon&r=PG" alt="image" style="width:128px; height:auto;  z-index:0"/>
<img onclick="toggleExpand(this);" src="https://i.stack.imgur.com/1ZIkv.jpg?s=48&g=1" alt="image" style="width:128px; height:auto;  z-index:0"/>

<强> jsBin playground

Answer 3

将doc.style.z-index更改为doc.style['z-index']并检查

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>

  <body>
    <script type="text/javascript">
      function toggleExpand(id) {
        var doc = document.getElementById(id);
        doc.style['z-index'] = "1";
        doc.style.width = "512px";
        doc.style.align = "center";
      }
    </script>
    <img id="img1" onclick="toggleExpand('img1');" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Alexanderplatz_Stadtmodell_1.jpg/1920px-Alexanderplatz_Stadtmodell_1.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0"
    />
  </body>
</body>

</html>

＆＃13;

Answer 4

为什么要将您的id作为函数参数传递！为什么不使用这样的东西 -

<body>
<img id="img1" onclick="toggleExpand();" src="I:\Images\image.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0"/>

<script type="text/javascript">
function toggleExpand(){
  var doc = document.getElementById('img1');
  doc.style.z-index = "1";
  doc.style.width = "512px";
  doc.style.align = "center";
}
</script>    
</body>

Answer 5

最好这样做。

var doc = document.getElementById(id)    
doc.addEventListener('click',toggleExpand);

javascript img onclick引用错误功能

5 个答案: