使用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 相关文章推荐
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
javascript前端实现多视频上传
Dec 13 Javascript
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
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
php制作动态随机验证码
2015/02/12 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
简单了解python的内存管理机制
2019/07/08 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
Pycharm打开已有项目配置python环境的方法
2020/07/03 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
成功的酒店创业计划书
2013/12/27 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
小学教师师德整改措施
2014/09/29 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS