隐藏图像并显示

Question

我有

var sanmigBottle = document.createElement('sanmigBottle');
sanmigBottle.id="sanmigBottle";
sanmigBottle.width="25%";
sanmigBottle.src='sanmigbottle.png';
sanmigBottle.onmousedown="showLibraryInfo()" ;
sanmigBottle.ontouchstart="showLibraryInfo()"  ;
sanmigBottle.align = "middle";
sanmigBottle.style= "-webkit-transform: rotate(350.77259795507035deg) translateZ(0px);'";

它加载到我的html中，但是我想隐藏它，并且想要显示一个触发器。 当我输入这个

sanmigBottle.style.visibility="hidden";

没用 我怎样才能做到这一点？ 我是JS新手，谢谢。

Answer 1

你应该用

sanmigBottle.style.display = 'none';

Answer 2

您必须将display设置为none ：

sanmigBottle.style.display="none";

然后将其设置为block或重新设置以使其再次可见：

sanmigBottle.style.display="block";

Answer 3

首先检查图像状态：

function showhide() {
    var img = document.getElementById('someimage');
    if (img.style.visibility === 'hidden') {
        // Currently hidden, make it visible
        img.style.visibility = "visible";
    } else {
        // Currently visible, make it hidden
        img.style.visibility = "hidden";
    }
}

然后应用可见性。

Answer 4

尝试使用jQuery

//create element
var sanmigBottle = $('<img id="sanmigBottle" width="25%" src='sanmigbottle.png' onmousedown="showLibraryInfo()" ontouchstart="showLibraryInfo()" align = "middle" style= "-webkit-transform: rotate(350.77259795507035deg) translateZ(0px);"/>');
//add to document and store object in context
var context = sanmigBottle.appendTo($('Document'));
//hide object
context.fadeOut();

jsfiddle中的演示