使用JavaScript動態(tài)設(shè)置樣式實現(xiàn)代碼及演示動畫
更新時間：2013年01月25日 09:49:34 作者：
使用onmouseover和onmouseout事件實現(xiàn)不同的效果而且是使用js動態(tài)實現(xiàn)，本文有利于鞏固你js與css方面的知識，感興趣的你可以了解下哦，希望本文對你有所幫助
今天做了一個css的練習(xí)，效果有點象Maxthon首頁一樣。使用onmouseover和onmouseout事件實現(xiàn)不同的效果。如：
你可以使用下面javascript。
<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方法。
<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>
你可以使用下面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>
您可能感興趣的文章:
- javaScript 讀取和設(shè)置文檔元素的樣式屬性
- js setattribute批量設(shè)置css樣式
- javascript 動態(tài)設(shè)置已知select的option的value值的代碼
- IE6下JS動態(tài)設(shè)置圖片src地址問題
- js 設(shè)置選中行的樣式的實現(xiàn)代碼
- 使用JavaScript動態(tài)設(shè)置樣式實現(xiàn)代碼(2)
- js批量設(shè)置樣式的三種方法不推薦使用with
- js動態(tài)設(shè)置div的值下例子
- javascript設(shè)置金額樣式轉(zhuǎn)換保留兩位小數(shù)示例代碼
- JavaScript通過元素的ID和name設(shè)置樣式
- 使用變量動態(tài)設(shè)置js的屬性名
- js style動態(tài)設(shè)置table高度
- javascript動態(tài)設(shè)置樣式style實例分析
- JavaScript動態(tài)設(shè)置div的樣式的方法
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于JavaScript中事件冒泡機(jī)制的相關(guān)資料,文中詳析介紹了什么是冒泡、冒泡捕獲需要以及冒泡和捕獲的具體區(qū)別,需要的的朋友可以參考下2021-06-06
這篇文章主要介紹了javascript常用函數(shù),歸納整理了一些常用的函數(shù)便于大家查詢參考,需要的朋友可以參考下2014-10-10
下面小編就為大家?guī)硪黄掳俣葥Q膚功能的簡單實例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了用box固定長寬實現(xiàn)圖片自動輪播效果,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了layui中的tab控件點擊切換觸發(fā)事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了js簡單實現(xiàn)點擊左右運動的方法,實例分析了javascript實現(xiàn)左右運動的相關(guān)要點與技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
本篇文章主要介紹了JavaScript中瀏覽器兼容問題的寫法小議，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-12-12
詳解微信開發(fā)中snsapi_base和snsapi_userinfo及靜默授權(quán)的實現(xiàn)
這篇文章主要介紹了詳解微信開發(fā)中snsapi_base和snsapi_userinfo及靜默授權(quán)的實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-03-03
開啟Javascript中apply、call、bind的用法之旅模式
在Javascript中，F(xiàn)unction是一種對象。Function對象中的this指向決定于函數(shù)被調(diào)用的方式,使用apply，call 與 bind 均可以改變函數(shù)對象中this的指向。2015-10-10
Javascript使用SWFUpload進(jìn)行多文件上傳
本篇文章主要解釋了使用SWFUpload進(jìn)行多文件上傳，這里整理了詳細(xì)的代碼，有需要的可以了解一下。2016-11-11