使用JavaScript動態(tài)設(shè)置樣式實(shí)現(xiàn)代碼(2)

更新時間：2013年01月25日 09:59:26 作者：

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

你可以參考到前一版本 http://www.dhdzp.com/article/33555.htm 這個有點(diǎn)不好的地方，就是如果想改變樣式，也許得使用查找替換才行。

因此，Insus.NET寫出另外一個方法來實(shí)現(xiàn)，這樣可以改一應(yīng)用百。
先寫一個樣式Style:

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

<style type="text/css"> 
.overStyle 
{ 
border-color:#3599ff; 
} 
.outStyle 
{ 
border-color: #fff; 
} 
</style> 

Javascript也要改一下：

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

 
<script type="text/javascript"> 
function onOver(Id) { 
Id.className = 'overStyle'; 
} 
function onOut(Id) { 
Id.className = 'outStyle'; 
} 
</script> 

最后是html的動態(tài)應(yīng)用。

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

 
<fieldset id="fs1" style="margin: 10px; padding: 10px; width: 170px; text-align: center;" 
onmouseover="onOver(this)" onmouseout="onOut(this)"> 
ERP <a  target="_blank">http://xxx.xxx.com/erp </a> 
</fieldset> 

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)遍歷含有input的table實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)遍歷含有input的table方法,結(jié)合實(shí)例形式分析了jsp讀取數(shù)據(jù)庫動態(tài)生成table及JavaScript遍歷table的相關(guān)技巧,需要的朋友可以參考下
2015-12-12
WEB開發(fā)之注冊頁面驗(yàn)證碼倒計時代碼的實(shí)現(xiàn)
近期在搞一個H5+backbone 項(xiàng)目,驗(yàn)證輸入手機(jī)號驗(yàn)證碼倒計時功能，代碼中包含了前端樣式布局代碼和后端邏輯實(shí)現(xiàn)，思路明確，具有參考借鑒價值，需要的朋友參考下吧
2016-12-12
JavaScript?ES6中class定義類實(shí)例方法
ES6提供了更接近面向?qū)ο?注意:javascript本質(zhì)上是基于對象的語言)語言的寫法,引入了Class(類)這個概念,作為對象的模板,下面這篇文章主要給大家介紹了關(guān)于JavaScript?ES6中class定義類的相關(guān)資料,需要的朋友可以參考下
2022-07-07
js 返回時間戳所對應(yīng)的具體時間
返回unix時間戳所對應(yīng)的具體時間的代碼
2010-07-07
JS中進(jìn)行字符串替換的方法
replace() 方法用于在字符串中用一些字符替換另一些字符，或替換一個與正則表達(dá)式匹配的子串，這篇文章主要介紹了js中進(jìn)行字符串替換的方法,需要的朋友可以參考下
2024-01-01
js判斷滾動條是否已到頁面最底部或頂部實(shí)例
這篇文章主要介紹了js判斷滾動條是否已到頁面最底部或頂部的原理與方法,以實(shí)例的形式詳細(xì)分析了js實(shí)現(xiàn)返回頂部功能所涉及的各種技巧,并對相關(guān)知識點(diǎn)進(jìn)行了總結(jié)歸納,需要的朋友可以參考下
2014-11-11
JS檢測數(shù)組類型的方法小結(jié)
這篇文章主要介紹了js檢測數(shù)組類型的方法小結(jié),有instanceof方法Array.isArray() 方法和Object.prototype.toString.call()方法，都是比較常用的，需要的朋友可以參考下
2017-03-03
JavaScript 動態(tài)三角函數(shù)實(shí)例詳解
本文通過實(shí)例代碼給大家實(shí)例講解了javascript動態(tài)三角函數(shù)知識，非常不錯，具有參考借鑒價值，需要的朋友參考下
2017-01-01
前端js經(jīng)典之字符串超全方法總結(jié)大全
我們操作字符串,也有一堆的方法來幫助我們操作,這篇文章主要給大家介紹了關(guān)于前端js經(jīng)典題之字符串超全方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-07-07
JavaScript之Blob對象類型的具體使用方法
這篇文章主要介紹了JavaScript之Blob對象類型的具體使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11