① 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区域的显示或者隐藏了,如下图所示