使用JavaScript动态设置样式实现代码(2)


Posted in Javascript onJanuary 25, 2013

你可以参考到前一版本 https://3water.com/article/33555.htm 这个有点不好的地方,就是如果想改变样式,也许得使用查找替换才行。

因此,Insus.NET写出另外一个方法来实现,这样可以改一应用百。
先写一个样式Style:

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

Javascript也要改一下:
<script type="text/javascript"> 
function onOver(Id) { 
Id.className = 'overStyle'; 
} 
function onOut(Id) { 
Id.className = 'outStyle'; 
} 
</script>

最后是html的动态应用。
<fieldset id="fs1" style="margin: 10px; padding: 10px; width: 170px; text-align: center;" 
onmouseover="onOver(this)" onmouseout="onOut(this)"> 
ERP <a href="http://xxx.xxx.com/erp" target="_blank">http://xxx.xxx.com/erp </a> 
</fieldset>
Javascript 相关文章推荐
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
Jun 29 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
jquery编写日期选择器
Mar 16 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 #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
You might like
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
PHP SEO优化之URL优化方法
2011/04/21 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
jQuery $.data()方法使用注意细节
2012/12/31 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
2018/06/04 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
python os模块在系统管理中的应用
2020/06/22 Python
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
铭立家具面试题
2012/12/06 面试题
幼师专业毕业生自荐信
2013/09/29 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2014财产信托协议书范本
2014/11/18 职场文书
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js