使用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 相关文章推荐
jQuery中detach()方法用法实例
Dec 25 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
JS实现图片切换效果
Nov 17 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 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使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php 把数字转换成汉字的代码
2015/07/21 PHP
joomla数据库操作示例代码
2016/01/06 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
定义select的边框颜色
2008/04/28 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
原生js实现给指定元素的后面追加内容
2013/04/10 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
python自动发微信监控报警
2019/09/06 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
审核会计岗位职责
2013/11/08 职场文书
表彰会主持词
2014/03/26 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
2014年预算员工作总结
2014/12/05 职场文书
顶岗实习计划书
2015/01/16 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL