使用JavaScript动态设置样式实现代码及演示动画

更新时间：2013年01月25日 09:49:34 作者：

使用onmouseover和onmouseout事件实现不同的效果而且是使用js动态实现，本文有利于巩固你js与css方面的知识，感兴趣的你可以了解下哦，希望本文对你有所帮助

今天做了一个css的练习，效果有点象Maxthon首页一样。使用onmouseover和onmouseout事件实现不同的效果。如：

你可以使用下面javascript。

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

fieldset应用上面的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 href="http://xxx.xxx.com/erp" target="_blank">http://xxx.xxx.com/erp </a> 
</fieldset> 

您可能感兴趣的文章:

JavaScript中事件冒泡机制示例详析
这篇文章主要给大家介绍了关于JavaScript中事件冒泡机制的相关资料,文中详析介绍了什么是冒泡、冒泡捕获需要以及冒泡和捕获的具体区别,需要的的朋友可以参考下
2021-06-06
javascript常用函数归纳整理
这篇文章主要介绍了javascript常用函数,归纳整理了一些常用的函数便于大家查询参考,需要的朋友可以参考下
2014-10-10
仿百度换肤功能的简单实例代码
下面小编就为大家带来一篇仿百度换肤功能的简单实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
用box固定长宽实现图片自动轮播js代码
这篇文章主要介绍了用box固定长宽实现图片自动轮播效果,需要的朋友可以参考下
2014-06-06
layui中的tab控件点击切换触发事件
这篇文章主要介绍了layui中的tab控件点击切换触发事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
js简单实现点击左右运动的方法
这篇文章主要介绍了js简单实现点击左右运动的方法,实例分析了javascript实现左右运动的相关要点与技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
谈谈JavaScript中浏览器兼容问题的写法小议
本篇文章主要介绍了JavaScript中浏览器兼容问题的写法小议，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2016-12-12
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
这篇文章主要介绍了详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现的相关资料,需要的朋友可以参考下
2017-03-03
开启Javascript中apply、call、bind的用法之旅模式
在Javascript中，Function是一种对象。Function对象中的this指向决定于函数被调用的方式,使用apply，call 与 bind 均可以改变函数对象中this的指向。
2015-10-10
Javascript使用SWFUpload进行多文件上传
本篇文章主要解释了使用SWFUpload进行多文件上传，这里整理了详细的代码，有需要的可以了解一下。
2016-11-11