導航:首頁 > 編程語言 > 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中的圖片不顯示不出來相關的資料

熱點內容
iphone程序加密 瀏覽:884
win10文件夾調整文件行高 瀏覽:681
創意手繪教程 瀏覽:754
微信刪除帳號信息 瀏覽:596
mysql操作類文件 瀏覽:649
繞過xp密碼 瀏覽:158
大眾速騰專用app有哪些 瀏覽:455
arpa首先將計算機網路劃分為 瀏覽:617
蘋果系統開機音樂 瀏覽:875
windows8顯示隱藏文件 瀏覽:603
ipad2可以升級到92嗎 瀏覽:857
如何打開ps保存的文件 瀏覽:744
幼兒編程教育有哪些 瀏覽:453
汽車發外地用什麼app 瀏覽:810
網路如何贊美女人漂亮 瀏覽:143
如何把桌面文件放到excel裡面 瀏覽:363
照片文件名是怎麼查的 瀏覽:876
c怎麼在cmd模式下顯示文件 瀏覽:325
手機怎麼把文件夾的圖片移到相冊 瀏覽:440
hjc是啥文件的格式 瀏覽:298

友情鏈接