js利用div背景，做一個(gè)豎線的效果。
更新時(shí)間：2008年11月22日 12:59:13 作者：
嘗試了好多種css屬性，總是無(wú)法達(dá)成目標(biāo)。主要就是height這個(gè)屬性，100%，對(duì)于ff似乎并不起什么作用，既然我將其父容器的高度也設(shè)置為100%，依然沒(méi)有效果。這樣的話，就無(wú)法顯示出平鋪的背景，想法也得不到實(shí)現(xiàn)。
后來(lái)發(fā)現(xiàn)，如果div樣式，如果設(shè)置了具體的高度，無(wú)論ie還ff，都能正常的表現(xiàn)。
但這個(gè)高度并不是固定的，而是會(huì)隨著旁邊div內(nèi)容的多少而變化。最后，只好借助javascript，加載時(shí)捕獲有關(guān)的div的高度，將其賦值給指定的div樣式，終于看到了想要的東西。
具體腳本是這樣的：
window.onload=function(){
document.getElementById('bg').style.height=document.getElementById('mydiv').offsetHeight+'px';
}
“bg”是要更改高度的div，“mydiv”是相關(guān)要參照的div。
最后那個(gè)單位“px”一定要加上，否則在ff下會(huì)無(wú)法識(shí)別。
這還是有個(gè)問(wèn)題，就是我看到有人介紹說(shuō)offsetHeight這個(gè)屬性在ie7下已經(jīng)不被支持了，具體我沒(méi)有試過(guò)。如果是這樣的話，ie7下這里只好顯示空白了。
但這個(gè)高度并不是固定的，而是會(huì)隨著旁邊div內(nèi)容的多少而變化。最后，只好借助javascript，加載時(shí)捕獲有關(guān)的div的高度，將其賦值給指定的div樣式，終于看到了想要的東西。
具體腳本是這樣的：
window.onload=function(){
document.getElementById('bg').style.height=document.getElementById('mydiv').offsetHeight+'px';
}
“bg”是要更改高度的div，“mydiv”是相關(guān)要參照的div。
最后那個(gè)單位“px”一定要加上，否則在ff下會(huì)無(wú)法識(shí)別。
這還是有個(gè)問(wèn)題，就是我看到有人介紹說(shuō)offsetHeight這個(gè)屬性在ie7下已經(jīng)不被支持了，具體我沒(méi)有試過(guò)。如果是這樣的話，ie7下這里只好顯示空白了。
您可能感興趣的文章:
- js實(shí)現(xiàn)GridView單選效果自動(dòng)設(shè)置交替行、選中行、鼠標(biāo)移動(dòng)行背景色
- 純js實(shí)現(xiàn)背景圖片切換效果代碼
- 利用JQuery和JS實(shí)現(xiàn)奇偶行背景顏色自定義效果
- JS實(shí)現(xiàn)很酷的水波文字特效實(shí)例
- 基于jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊導(dǎo)航菜單水波動(dòng)畫效果附源碼下載
- Android實(shí)現(xiàn)點(diǎn)擊Button產(chǎn)生水波紋效果
- Android項(xiàng)目實(shí)戰(zhàn)手把手教你畫圓形水波紋loadingview
- jQuery實(shí)現(xiàn)點(diǎn)擊水紋波動(dòng)動(dòng)畫
- Android仿水波紋流量球進(jìn)度條控制器
- javascript實(shí)現(xiàn)起伏的水波背景效果
相關(guān)文章
下面小編就為大家?guī)?lái)一篇JavaScript對(duì)Json的增刪改屬性詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
這篇文章主要介紹了js彈出確認(rèn)是否刪除對(duì)話框，具體實(shí)現(xiàn)代碼如下，需要的朋友可以參考下2014-03-03
JS實(shí)現(xiàn)常用導(dǎo)航鼠標(biāo)下經(jīng)過(guò)下方橫線自動(dòng)跟隨效果
這篇文章主要介紹了JS寫常用導(dǎo)航鼠標(biāo)下經(jīng)過(guò)下方橫線自動(dòng)跟隨效果，文中還給大家講解了基于css?+?js?實(shí)現(xiàn)導(dǎo)航欄下劃線跟隨鼠標(biāo)滑動(dòng)效果,需要的朋友可以參考下2023-01-01
JavaScript實(shí)現(xiàn)圖像模糊化的方法實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖像模糊化的方法,文中先進(jìn)行簡(jiǎn)單介紹，而后給出了完整的實(shí)例代碼，有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
Some tips of wmi scripting in jscript (1)
Some tips of wmi scripting in jscript (1)...2007-04-04
JS 刪除字符串最后一個(gè)字符的實(shí)現(xiàn)代碼
本篇文章主要是對(duì)JS刪除字符串最后一個(gè)字符的實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
JavaScript原型對(duì)象原理與應(yīng)用分析
這篇文章主要介紹了JavaScript原型對(duì)象原理與應(yīng)用,結(jié)合實(shí)例形式分析了javascript原型對(duì)象的概念、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
javascript面向?qū)ο笾L問(wèn)對(duì)象屬性的兩種方式分析
這篇文章主要介紹了javascript面向?qū)ο笾L問(wèn)對(duì)象屬性的兩種方式分析,實(shí)例分析了直接訪問(wèn)對(duì)象屬性的方式與數(shù)組訪問(wèn)方式,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了8 個(gè)有用的JS技巧(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-07-07
uni-app集成使用SQLite數(shù)據(jù)庫(kù)的方法步驟
這篇文章主要介紹了uni-app集成使用SQLite數(shù)據(jù)庫(kù)的相關(guān)資料,包括勾選SQLite選項(xiàng)、封裝sqlite.js文件以及在使用時(shí)注意的事項(xiàng),文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01