① 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區域的顯示或者隱藏了,如下圖所示