如何写js来控制img标签的显示隐藏

html-css08

如何写js来控制img标签的显示隐藏,第1张

var oDiv=document.getElementById("img")

var oDiv=document.getElementById("div1")//用来控制img的显示和隐藏

window.onload = function(){

if(oDiv.style.display == '')

oDiv.style.display = 'block'

}

//需要触发的事件

function ChangImg(){

if()//添加使其显示的条件

oDiv.style.display = 'none'

else {

oDiv.style.display = 'block'

}

}

扩展资料：

注意事项

一、首先来说一下标签的隐藏

1、在标签中添加css属性即可{display:none}

2、在标签中添加类hidden  如（haml例子：%input#diaplay.hidden）

（html例子：<input type="hidden">）

二、标签的显示与隐藏

只需两个函数即可：

$().removeClass('hidden')  //移除hidden类即显示被隐藏的标签

$().addClass('hidden')      //增加hidden类即隐藏某标签

例如：

%input#display

%button{:οnclick=>"display_input()"}

函数:显示标签

function display_input(){

 $('#display').remomeClass('hidden')

}

函数：隐藏标签

function display_input(){

 $('#display').addClass('hidden')

}

函数：隐藏标签

用margin-bottom负值就可以实现你想要的效果了，假如img的父元素是一个class为box的div

<div class="box">

<img src="abc.jpg" />

</div>

那么在css里面只要这样定义就可以了:

.box {height:100%overflow:hidden}

.box img {margin-bottom:-30px}

这样不管图片的高度是多少，底部的30像素都会被隐藏了~~