导航:首页 > 编程语言 > 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中的图片不显示不出来相关的资料

热点内容
windows7系统共享文件 浏览:62
ps前往文件夹 浏览:694
信捷plc编程用哪个软件 浏览:939
vba导入文件 浏览:690
更新后版本英文怎么说 浏览:267
桌面云配置文件分离 浏览:505
iphone5如何升级4g网络 浏览:5
团购是在哪个app 浏览:897
打开多个word文档图片就不能显示 浏览:855
腾讯新闻怎么切换版本 浏览:269
app安装失败用不了 浏览:326
桌面文件鼠标点开会变大变小 浏览:536
手机误删系统文件开不了机 浏览:883
微信兔子甩耳朵 浏览:998
android蓝牙传文件在哪里 浏览:354
苹果6s软解是真的吗 浏览:310
c语言代码量大 浏览:874
最新网络卫星导航如何使用 浏览:425
以下哪些文件属于图像文件 浏览:774
zycommentjs 浏览:414

友情链接