使用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 相关文章推荐
jQuery 一个图片切换的插件
Oct 09 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
JavaScript实现梯形乘法表的方法
Apr 25 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
vue+springboot实现登录验证码
May 27 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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
python3实现小球转动抽奖小游戏
2020/04/15 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
python中p-value的实现方式
2019/12/16 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
艺术设计专业个人求职信
2013/09/21 职场文书
采购员的工作职责
2013/12/26 职场文书
求职信范文英文版
2014/01/05 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
《认识年月日》教学反思
2016/02/19 职场文书