导航:首页 > 编程语言 > js获取div中的图片不显示不出来

js获取div中的图片不显示不出来

发布时间:2025-04-29 04:58:32

js选中单选框,显示DIV层里的内容,默认DIV内容不显示

这个用CSS搭配js就可以解决,通过visibility(占地儿)的hidden或display的none(不占地儿)此元素不会被显示(不占地儿)属性就可以让其默认为不显示,通过js判断当选中单选框时,将目标DIV层的属性改为visible或block即可

② js如何判断div里面的图片为空隐藏,否则显示,如下图

<img src="images/img1.jpg" alt="这里是第一张图片">

改为

<img src="images/img1.jpg" alt="这里是第一张图片" onerror="box2.style.display='none';">

剩下的四张图片的代码也照这样修改。

③ 图片显示问题 会JS的来帮下忙

你这段代码第二个图片肯定会显示不出来啦。
当你调用onChange="FnImgChange(2)" 时执行的还是这段代码
var objImgPath = document.getElementById("file_pic_path1");
var objImg = document.getElementById("divShow");
所以不管你是图片一调用的这个函数还是图片二调用的这个函数,都只是取得了图片一的id,所以第二张图片永远都显示不了
初步帮你修改了下,代码有点多了,你可以简化一下
function FnImgChange(n){
if(n==1){
var objImgPath = document.getElementById("file_pic_path1");
var objImg = document.getElementById("divShow");
var img = objImgPath.value;

objImg.style.visibility = "hidden";
objImg.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img;
objImg.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
setTimeout("setImg(1)",100);
}
else
{
var objImgPath2 = document.getElementById("file_pic_path2");
var objImg2 = document.getElementById("divShow2");
var img = objImgPath2.value;

objImg2.style.visibility = "hidden";
objImg2.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img;
objImg2.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
setTimeout("setImg(2)",100);
}
//过一小会获取div的宽高.

}

function setImg(m)
{
if(m==1){
var o = document.getElementById("divShow");
}
else{
var o = document.getElementById("divShow2");
}
var width_img;
var height_img;

o.style.visibility = "visible";
width_img=o.offsetWidth;
height_img=o.offsetHeight;

var width=83; //预定义宽,图片的宽度了
var height=63; //预定义高,如果宽小于长度,那么他会自适应按照宽度来计算比例,所以对于一般情况长>宽的照片时候,这个参数没啥意义

var ratW; //宽的缩小比例
var ratH; //高的缩小比例
var rat; //实际使用的缩小比例
if(width_img<width && height_img<height)
{
//如果比预定义的宽高小,原图显示。
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";
return;

}
else
{
//如果大的化,要把 sizingMethod改成scale 如果属性是image,不管怎么改div的宽高,都不起作用
o.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";

}
ratH = height/height_img;
ratW = width/width_img;
if(ratH<ratW) //选择最小的作为实际的缩小比例
rat=ratH;
else
rat=ratW;

width_img = width_img * rat;
height_img = height_img * rat;
o.style.width = width_img;
o.style.height = height_img;
}

最后调用的时候修改下,
onChange="FnImgChange(1)"
onChange="FnImgChange(2)"
我也是刚学JS不久,可能还有更好的解决方案。

④ JS如何控制DIV的显示和隐藏

我们进行网页开发的时候,经常需要运用JS去控制某个div的显示或者隐藏。下面小编通过实例教大家如何实现这种功能。
打开Sublime Text编辑器,新建一个HTML文档,注意一定要设置编码格式为utf8,如下图所示

然后在Body区域准备一个div和一个button按钮,接下来会实现点击按钮来显示和隐藏DIV,如下图所示

接下来我们实现JS脚本的功能,如下图所示,主要运用display属性来控制div的显示或者隐藏

最后运行页面,我们点击按钮的时候就会实现对div区域的显示或者隐藏了,如下图所示

阅读全文

与js获取div中的图片不显示不出来相关的资料

热点内容
网络中常用的传输介质 浏览:518
文件如何使用 浏览:322
同步推密码找回 浏览:865
乐高怎么才能用电脑编程序 浏览:65
本机qq文件为什么找不到 浏览:264
安卓qq空间免升级 浏览:490
linux如何删除模块驱动程序 浏览:193
at89c51c程序 浏览:329
怎么创建word大纲文件 浏览:622
袅袅朗诵文件生成器 浏览:626
1054件文件是多少gb 浏览:371
高州禁养区内能养猪多少头的文件 浏览:927
win8ico文件 浏览:949
仁和数控怎么编程 浏览:381
项目文件夹图片 浏览:87
怎么在东芝电视安装app 浏览:954
plc显示数字怎么编程 浏览:439
如何辨别假网站 浏览:711
宽带用别人的账号密码 浏览:556
新app如何占有市场 浏览:42

友情链接