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


Posted in Javascript onJanuary 25, 2013

今天做了一个css的练习,效果有点象Maxthon首页一样。使用onmouseover和onmouseout事件实现不同的效果。如:
使用JavaScript动态设置样式实现代码及演示动画
你可以使用下面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 相关文章推荐
实现前后端数据交互方法汇总
Apr 07 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 #Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 #Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 #Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 #Javascript
ajax处理php返回json数据的实例代码
Jan 24 #Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 #Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 #Javascript
You might like
sony ICF-2010 拆解与改装
2021/03/02 无线电
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
详解Python中的元组与逻辑运算符
2015/10/13 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Python交互环境下实现输入代码
2018/06/22 Python
python实现图像全景拼接
2020/03/27 Python
python 爬虫请求模块requests详解
2020/12/04 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
Melissa香港官网:MDreams
2016/07/01 全球购物
联想中国官方商城:Lenovo China
2017/10/18 全球购物
单位工程竣工验收方案
2014/03/16 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
考博专家推荐信
2014/05/10 职场文书
倡议书范文格式
2014/05/12 职场文书
二手房购房协议书范本
2014/10/05 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA