使用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打造的百分比动态色彩条插件
Sep 19 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
使用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 数组基础知识小结
2010/08/20 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
小程序实现多列选择器
2019/02/15 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
Python深入学习之内存管理
2014/08/31 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
python 系统调用的实例详解
2017/07/11 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
竞选班长演讲稿500字
2014/08/22 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
员工辞职信范文
2015/03/02 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
深入浅析React中diff算法
2021/05/19 Javascript
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python