快捷導(dǎo)航

使用JavaScript動(dòng)態(tài)設(shè)置樣式實(shí)現(xiàn)代碼及演示動(dòng)畫(huà)

更新時(shí)間：2013年01月25日 09:49:34 作者：

使用onmouseover和onmouseout事件實(shí)現(xiàn)不同的效果而且是使用js動(dòng)態(tài)實(shí)現(xiàn)，本文有利于鞏固你js與css方面的知識(shí)，感興趣的你可以了解下哦，希望本文對(duì)你有所幫助

今天做了一個(gè)css的練習(xí)，效果有點(diǎn)象Maxthon首頁(yè)一樣。使用onmouseover和onmouseout事件實(shí)現(xiàn)不同的效果。如：

你可以使用下面javascript。

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
function DynamicSetStyle(id, attr, val) { 
var element = document.getElementById(id); 
if (element) element.style[attr] = val; 
} 
</script> 

fieldset應(yīng)用上面的javascript的DynamicSetStyle方法。

復(fù)制代碼代碼如下:

 
<fieldset id="fs1" style="margin: 10px; padding: 10px; width: 170px; text-align: center;" 
onmouseover="DynamicSetStyle('fs1','border-color','#3599ff')" onmouseout="DynamicSetStyle('fs1','border-color','')"> 
ERP 
<a  target="_blank">http://xxx.xxx.com/erp </a> 
</fieldset> 

您可能感興趣的文章:

相關(guān)文章

JS截取字符串的三種方法詳解
本文詳細(xì)講解了JS截取字符串的三種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-12-12
基于Bootstrap的標(biāo)簽頁(yè)組件及bootstrap-tab使用說(shuō)明
這篇文章主要介紹了基于Bootstrap的標(biāo)簽頁(yè)組件及bootstrap-tab使用說(shuō)明,需要的朋友可以參考下
2017-07-07
微信小程序之?dāng)?shù)據(jù)緩存的實(shí)例詳解
這篇文章主要介紹了微信小程序之?dāng)?shù)據(jù)緩存的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家掌握這部分內(nèi)容，需要的朋友可以參考下
2017-09-09
js實(shí)現(xiàn)鼠標(biāo)懸浮給圖片加邊框的方法
這篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)懸浮給圖片加邊框的方法,涉及jquery.insetborder.js中borderEffect方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01
js代碼實(shí)現(xiàn)多人聊天室
這篇文章主要為大家詳細(xì)介紹了js代碼實(shí)現(xiàn)多人聊天室，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
JavaScript Array Flatten 與遞歸使用介紹
用 JavaScript 將 [1,2,3,[4,5, [6,7]], [[[8]]]] 這樣一個(gè) Array 變成 [1,2,3,4,5, 6,7,8] 呢？傳說(shuō)中的 Array Flatten
2011-10-10
JavaScript定時(shí)器實(shí)現(xiàn)限時(shí)秒殺功能
這篇文章主要為大家詳細(xì)介紹了JavaScript定時(shí)器實(shí)現(xiàn)限時(shí)秒殺功能，適合用于電商節(jié)日活動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
Web?Components入門教程示例詳解
這篇文章主要為大家介紹了Web?Components入門教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
JS實(shí)現(xiàn)放大、縮小及拖拽圖片的方法【可兼容IE、火狐】
這篇文章主要介紹了JS實(shí)現(xiàn)放大、縮小及拖拽圖片的方法,可兼容IE及火狐等瀏覽器,通過(guò)javascript自定義函數(shù)實(shí)現(xiàn)針對(duì)圖片的放大、縮小及拖拽等功能,涉及javascript動(dòng)態(tài)操作頁(yè)面元素的相關(guān)技巧,需要的朋友可以參考下
2016-08-08
JavaScript實(shí)現(xiàn)全選取消效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)全選取消效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-12-12