document.getElementById ('')에서 HTML 요소를 겹치는 방법 style.visibility = "hidden";

내 질문에 다소 혼란 스러울 지 모르지만 설명하기 위해 최선을 다할 것입니다. 우선, 제 질문이 어리석게 들리도록 프로그래밍에 총 초보자임을 알려 드리고자합니다. 제발 기다려주십시오 ...document.getElementById ('')에서 HTML 요소를 겹치는 방법 style.visibility = "hidden";

javascript를 사용하여 html 요소를 숨기고 표시 할 수 있지만 표시되는 요소가 숨겨진 요소의 위치를 점유하지 않는 것으로 나타났습니다. 어쨌든 요소가 존재하지만 보이지 않는 것임을 이해합니다. 보이는 요소가 겹치게 만들거나 숨겨진 요소의 위치를 어떻게 차지할 수 있을까요?

2- 요소는 다음

DIV 자료 = "show_description"
입력 타입 = "제출"ID = "send_notice"

다음은 코드입니다. ,

index.php

<?php include('functions.php'); ?> 

<?php session_start(); ?> 

<?php 
$yr = isset($_GET['year_list']) ? $_GET['year_list'] : null; 
$evnt = isset($_GET['event_list']) ? $_GET['event_list'] : null; 
?> 

<html> 
<head> 
<script type="text/javascript" src="myscripts.js"></script> 
<style type='text/css'> 
    #show_description { 
    min-height: 100px; 
    min-width: 500px; 
    max-height: 100px; 
    max-width: 500px; 
    background-color: #000; 
    color: #fff; 
    padding: 10px; 
    } 
</style> 
</head> 

<body onload="check_year_event();"> 
<div> 
<form name="myform" action="index.php" method="get" > 

    Select Year: <?php echo hspacer(1); ?> 
    <select id="year_list" name="year_list" onchange="check_year_event();" > 
    <?php 
    for($year = (date('Y') - 100); $year <= (date('Y') + 100); $year++) { 
    if ($year == date('Y')) echo "<option value='$year' name='$year' selected='' >" . $year . "</option>"; 
    else echo "<option value='$year' name='$year' >" . $year . "</option>"; 
    } 
    ?> 
    </select> 
    <?php echo hspacer(5); ?> 
    Select Event: <?php echo hspacer(1); ?> 
    <select id="event_list" name="event_list" onchange="check_year_event();" > 
    <?php 
    $events = array("Karate Tournament", "Beauty Pageant", "Film Festival", "Singing Contest", "Wedding"); 

    foreach($events as $event) echo "<option value='$event' name='$event' >" . $event . "</option>"; 
    ?> 
    </select> 
    <?php echo vspacer(2); echo hspacer(22); ?> 
    <input type="submit" id="send_notice" value="Send Notice" /> 
</form> 
</div> 


<div id="show_description" > 

</div> 

</body> 
</html>

functions.php

<?php 
function hspacer($num_of_spaces) { 
    $spaces = ""; 
    if ($num_of_spaces > 0) for($i=0; $i<$num_of_spaces; $i++) $spaces .= "&nbsp;"; 

    return $spaces; 
} 

function vspacer($num_of_linefeeds) { 
    $linefeeds = ""; 
    if ($num_of_linefeeds > 0) for($i=0; $i<$num_of_linefeeds; $i++) $linefeeds .= "<br />"; 

    return $linefeeds; 
} 
?>

myscripts.js

function create2DArray(row, col){ 
var array2D = new Array(row); 

for (var i = 0; i < row; i++) { 
    array2D[i] = new Array(col); 
} 

return array2D; 
} 

function check_year_event() { 
var years_and_events = create2DArray(10, 3); 

years_and_events[0][0] = 2001; 
years_and_events[0][1] = "Karate Tournament"; 
years_and_events[0][2] = "Annual karate tournament held globally"; 
years_and_events[1][0] = 2002; 
years_and_events[1][1] = "Beauty Pageant"; 
years_and_events[1][2] = "Beauty pageant held globally"; 
years_and_events[2][0] = 2003; 
years_and_events[2][1] = "Film Festival"; 
years_and_events[2][2] = "Film festival held globally"; 
years_and_events[3][0] = 2004; 
years_and_events[3][1] = "Singing Contest"; 
years_and_events[3][2] = "Singing contest tournament held globally"; 
years_and_events[4][0] = 2005; 
years_and_events[4][1] = "Wedding"; 
years_and_events[4][2] = "Wedding tournament held globally"; 
years_and_events[5][0] = 2007; 
years_and_events[5][1] = "Karate Tournament"; 
years_and_events[5][2] = "Annual karate tournament held globally"; 
years_and_events[6][0] = 2008; 
years_and_events[6][1] = "Beaty Pageant"; 
years_and_events[6][2] = "Beauty pageant held globally"; 
years_and_events[7][0] = 2009; 
years_and_events[7][1] = "Film Festival"; 
years_and_events[7][2] = "Film festival held globally"; 
years_and_events[8][0] = 2010; 
years_and_events[8][1] = "Singing Contest"; 
years_and_events[8][2] = "Singing contest tournament held globally"; 
years_and_events[9][0] = 2011; 
years_and_events[9][1] = "Wedding"; 
years_and_events[9][2] = "Wedding tournament held globally"; 


var year = document.getElementById('year_list').value; 
var event = document.getElementById('event_list').value; 
var found = false; 



for (var i = 0; i < years_and_events.length; i++) { 
    if ((year == years_and_events[i][0]) && (event == years_and_events[i][1])) { 
    document.getElementById('show_description').innerHTML = years_and_events[i][2]; 
    document.getElementById('send_notice').style.visibility = "hidden"; 
    document.getElementById('show_description').style.visibility = "visible"; 
    found = true; 
    break; 
    } 
} 

if (found == false) { 
    document.getElementById('show_description').style.visibility = "hidden"; 
    document.getElementById('send_notice').style.visibility = "visible"; 
} 
}

출처

2011-05-16 Newbie Coder

사용 display: none 대신 개체를 숨 깁니다. Visiblity: hidden 여전히 요소의 공간을 차지합니다.

출처

2011-05-16 03:03:56

은 document.getElementById ('send_notice')와 같습니다. display = "none"; ??? –

CSS 속성이기 때문에'visibility' 속성을 설정하는 것과 같습니다 :'document.getElementById ('send_notice'). style.display = "none";'그리고'document.getElementById (' send_notice '). style.display = ""; –

감사합니다. –

document.getElementById ('')에서 HTML 요소를 겹치는 방법 style.visibility = "hidden";

답변

관련 문제