Question

当我点击另一个div名称content时，我有一个div button，其高度应为300px。但是，当再次点击button div？

时，如何重置高度？

以下是供参考的javascript代码：

function chk()
{
    var x = document.getElementById('content').style.height = '300px';

}

这是HTML代码

<div id="content">
This is dummy text.
    </div>
    <div id="button" onclick="chk()">
    click to read
    </div>

当button div点击内容高度增加时，如何通过点击同一个具有相同onclick事件的div来降低高度？

Answer 1

要么是旗帜

var flag;

function chk() {
    var height = flag ? '0px' : '300px';
    document.getElementById('content').style.height = height;
    flag = !flag;
}

或检查当前身高

function chk() {
    var currHeight = document.getElementById('content').style.height;
    var setHeight = height == '300px' ? '0px' : '300px';
    document.getElementById('content').style.height = setHeight;
}

Answer 2

你可以使用一个标志：

var isSet = false:

function chk(){
    if(!isSet) {
        var x = document.getElementById('content').style.height = '300px';
        isSet = true;
    }
    else {
        // some other computation
        isSet = false;
    }

}

Answer 3

使用CSS：

#content {
    height: auto;
}
#content.expand {
    height: 300px;
}

在你的剧本中：

function chk()
{
    var node = document.getElementById('content');

    node.classList.toggle('expand');
}

这使状态保持在您正在处理的元素的本地状态，从而使代码更加灵活。

另请参阅：classList API

Answer 4

如果您只是学习HTML，CSS和JavaScript，首先应该让代码更清晰。

// HTML should look more like
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <style type='text/css'>
      @import 'common.css'; @import 'page.css';
    </style>
  </head>
<body>
  <div id='content'>
    This is dummy text.
  </div>
  <input type='button' value='click to read' id='button' />
  <script type='text/javascript' src='common.js'></script>
  <script type='text/javascript' src='page.js'></script>
</body>
</html>

请注意，您的按钮应该是按钮，而不是div。 XHTML对于抓取和XSLT更加可扩展，并且可以在HTML页面上使用，但不是相反。

// learn to keep your JavaScript separate pages for caching - common.js
//<![CDATA[
// reduce objects to smaller variables and never use `document.getElementById()`
var doc = document, bod = doc.body;
function E(e){
  return doc.getElementById(e);
}
//]]>

// page.js
//<![CDATA[
var button = E('button');
/* The self-executing Anonymous Function below creates scope for `var test` and
   returns an unexecuted function you can call later. Note that a function is 
   basically a variable that if you add `()` to will execute. */
var changeHeight = (function(){
  var test = false;
  return function(id, before, after){
    E(id).style.height = test ? before : after;
    test = !test;
  }
})();
/* This is a backward compatible way of creating an `onclick` function, unlike
   `.addEventListener()` and `attachEvent()`, this is assignment, so it will
    write over your last `onclick` assiged to this specific Element */
button.onclick = function(){
  changeHeight('content', '20px', '300px');
}
// To combat the comment above you could do something like this:
/*
button.onclick = function(){
  changeHeight('content', '20px', '300px');
}
function anotherFunction(){
  console.log('wow');
}
var before = button.onclick;
button.onclick = function(){
  if(before)before();
  anotherFunction();
}
*/
/* An executed function, would execute before the event is handled. The only
   thing that is automatically passed to your variable function or Anonymous
   Function is the Event Object. In this case it is not necessary, because we
   are not accessing the Event Object. */
//]]>

在javascript中一个接一个地在相同的onclick事件上调用两个不同的函数

4 个答案: