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