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

熱點內容
採集器怎麼採集淘寶數據 瀏覽:706
word如何一次保存多個文件 瀏覽:266
光遇國際服網路錯誤怎麼解決 瀏覽:648
塞班qq影音1 瀏覽:617
word文本框工具 瀏覽:781
如何編寫簡單的編程 瀏覽:253
蘋果描述文件怎麼打開 瀏覽:70
lol內部語音文件夾 瀏覽:177
魔趣忘記鎖屏密碼 瀏覽:690
ps大文件怎麼轉成pdf 瀏覽:917
lolS3是刺客版本s4法坦 瀏覽:623
美版蘋果6s顏色有幾種 瀏覽:368
ado操作excel文件數據 瀏覽:3
win10系統刪不掉文件 瀏覽:770
lol最新61版本 瀏覽:242
什麼叫通訊大數據出行卡 瀏覽:68
什麼是創新編程教育 瀏覽:712
模具cnc編程入門先學什麼 瀏覽:606
ug線切割編程如何顯示毛坯 瀏覽:349
葫蘆俠java版下載 瀏覽:989

友情鏈接