te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Differences between style hidden, block and none - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Differences between style hidden, block and none - Stack Overflow

    javascript - Differences between style hidden, block and none - Stack Overflow

    programmeradmin1浏览0评论

    I am trying to find out the differences between style

    • hidden
    • block
    • none

    I am trying with this example, but unfortunately this isn't working. Could anybody please let me know the answer?

    <html>
<head>
  <title>JavaScript Unleashed</title>

<script>
  function callMe()
  {

  document.getElementById('layer1').style.visibility = 'block';
  }

  </script>
</head>
<body onload="callMe()">


  <div name="layer1">

  <hr>DIV 1<hr>

  </div>




</body>
</html>

    I am trying to find out the differences between style

    • hidden
    • block
    • none

    I am trying with this example, but unfortunately this isn't working. Could anybody please let me know the answer?

    <html>
<head>
  <title>JavaScript Unleashed</title>

<script>
  function callMe()
  {

  document.getElementById('layer1').style.visibility = 'block';
  }

  </script>
</head>
<body onload="callMe()">


  <div name="layer1">

  <hr>DIV 1<hr>

  </div>




</body>
</html>
    • javascript
    Share Improve this question edited May 21, 2015 at 10:00 Ḟḹáḿíṅḡ Ⱬỏḿƀíé 2,1485 gold badges25 silver badges34 bronze badges asked Jul 11, 2011 at 14:46 user663724user663724 1
    • did you try document.getElementById('layer1').style.display = 'block'; and document.getElementById('layer1').style.display = 'none'; – Nasaralla Commented Jul 11, 2011 at 14:49
    Add a ment  | 

    9 Answers 9

    Reset to default 8

    You're really close. Two different properties.

    display: (block || none) (there are more options here)
visibility: (visible || hidden)

    The different is with display:none the element is pletely hidden from the view. So if you have a box with 300px height and width then you would not see anything there.

    With visibility:hidden it will keep the dimensions of the area, but will hide all the content.

    Block isn't a valid visibility option. You are thinking of the Display property which can be set to block.

    Visibility

    Display

    It should be style.display for "block" and "none" to work. Visibility reserves space for the element on the page while, display:none doesn't.

    Take a look here for full reference and examples on the difference between different styles decalrations. (hidden relates to visibility)

    Basically:

    display: block

    display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).

    display: none

    display: none means that the element is not displayed at all (so you won't see it in the example either).

    There are two elements in CSS style: visibility and display. Visibility may be hidden or visible (or collapse for tables). Display may be inline, block or none.

    The main difference between display: none and visibility: hidden is that in the second case the content still takes spaces on the page for layout purposes, but is not visible, however with display: none the content is removed from the layout altogether.

    There are two css styles you are confusing:

    visibility which can be set to visible or hidden - this hides the object without removing it from the flow, which means that the formatting of the page will be unchanged.

    display which can be many things including: block, inline, none.

    Setting display:none also hides an element, but it also removes it from the page flow, meaning surrounding elements can be affected as they "fill" the hole.

    for hiding document element

     document.getElementById('layer1').style.visibility = 'hidden';

    that can also be achieved by

     document.getElementById('layer1').style.display = 'none';

    so for showing you do

     document.getElementById('layer1').style.display = 'block';

    or

     document.getElementById('layer1').style.visibility = 'none';

    while defining the div you just need to add the style property as below 

    <div id="layer1" style="disply:none" >
</div>

    and while using in function 

    document.getElementById("layer1").style.display = "";

    You can try the following modified code:

    <html>
<head>
<title>JavaScript Unleashed</title>

<script>
  function callMe()
  {
    document.getElementById("layer1").style.display = "none";
  }
function resetElement()
{
  document.getElementById("layer1").style.display = "block";
}
</script>
</head>
<body>

<h1> Heading </h1>
  <div id="layer1">
  <button onclick="callMe()">click to hide</button>
    <hr>DIV 1<hr>
  </div>
  <div>
  <button onclick="resetElement()">Reset All</button>
  </div>
</body>
</html>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论