javascript - 以前に非表示にした画像をJavaScriptで表示できません

Question

HTML内の画像は、id = "mobile_right_folder_image"起動時に非表示になると予想されます。イベントでは、画像が表示されます。

画像はインラインdisplay:noneを使用して非表示になり、画像のIDを使用してJavascript関数で画像を表示しようとします。プロトタイプの使用-アプリケーションでのAJAX。

私はjavascriptの表示、可視性属性を試しましたが、何も役に立たないようです。私は別の場所に似たような画像を持っていますが、これはうまく機能します。

親のプロパティの一部が、画像の子を表示させていないのではないかと疑っています。助けてください。

HTML Code structure below :


<div id="mc_div_main">
<div id="mc_div_folders_container" style="width: 144px; display: none;">
    <div id="mc_div_content" style="left: 0px;" name="mc_div_content">
        <div id="mc_div_report" class="content" style="display: none" name="content_div"> </div>
        <div id="mc_div_compose" class="content" style="display: none" name="content_div"> </div>
        <div id="mc_div_message_list" class="content" name="content_div">
            <div id="rs_container" class="tile_container" style="overflow: hidden">
                <div class="tile_title_bar">
                        <img id="mobile_right_folder_image" border="0" onclick="javascript:f_folderVSMsgDisplay('1');" style="vertical-align: middle; height: 16px; padding-left: 2px; display:none" src="images/col_chooser_right.gif">
                    <span class="shadow">
                    <span class="tile_header_widgets" style="text-align: right; margin-right: 8px;">
                </div>
            <div id="rs_document" style="height: 150px;">
            <p> </p>
        <div id="rs_separator" class="separator" style="top: 172px;"> </div>
        <div id="rs_calendar" style="bottom: 0px; overflow: auto; top: 178px;">     
        </div>
        </div>
        </div>
        </div>
    </div>



Java script :

         document.getElementById('mobile_right_folder_image').style.display='';

inline＆bloc属性 も表示してみました。

---

以下のようなより良いhtmlツリー構造：（mc_div_folders_container、mc_div_contentは同じレベルの兄弟です）

CHILD-> PARENTパス画像：mobile_right_folder_image->->

疑っています：style = "overflow：hidden"

<div id="mc_div_main">
    <div id="mc_div_folders_container" style="width: 144px;">
        <div id="mc_div_folders" style="bottom: 0px;">
        <div id="mc_folders_separator" class="separator" style="height: 6px; width: 100%; postion: absolute; z-index: 1; height: 407; display: none;"> </div>
        <div id="mc_div_content_selector" style="display: none; overflow: hidden;">
    </div>
    <div id="mc_div_content" style="left: 150px;" name="mc_div_content">
        <div id="mc_div_report" class="content" style="display: none" name="content_div"> </div>
        <div id="mc_div_compose" class="content" style="display: none" name="content_div"> </div>
        <div id="mc_div_message_list" class="content" name="content_div">
        <div id="rs_container" class="tile_container" style="overflow: hidden">
            <div class="tile_title_bar">
                <img id="mobile_right_folder_image" border="0" onclick="javascript:f_folderVSMsgDisplay('1');" style="vertical-align: middle; height: 16px; padding-left: 2px; display:none" src="images/col_chooser_right.gif">
                <span class="shadow">
                <span class="tile_header_widgets" style="text-align: right; margin-right: 8px;">
            </div>
            <div id="rs_document" style="height: 150px;">
            <p> </p>
            <div id="rs_separator" class="separator" style="top: 172px;"> </div>
            <div id="rs_calendar" style="bottom: 0px; overflow: auto; top: 178px;">
        </div>
        </div>
    </div>
</div>

Answer 1

mc_div_folders_containerは非表示になっているため、スタイルに関係なく、すべての子孫（画像は子孫です）は表示されません。

document.getElementById('mc_div_folders_container').style.display='inline-block';
document.getElementById('mobile_right_folder_image').style.display='block';

Answer 2

プロトタイプを使用する場合は、$('mobile_right_folder_image').show()