使用JavaScript动态设置样式实现代码(2)
更新时间：2013年01月25日 09:59:26 作者：
使用onmouseover和onmouseout事件实现不同的效果而且是使用js动态实现，本文有利于巩固你js与css方面的知识，感兴趣的你可以了解下哦，希望本文对你有所帮助
你可以参考到前一版本 https://www.jb51.net/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>
因此，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 读取和设置文档元素的样式属性
- js setattribute批量设置css样式
- javascript 动态设置已知select的option的value值的代码
- IE6下JS动态设置图片src地址问题
- js 设置选中行的样式的实现代码
- 使用JavaScript动态设置样式实现代码及演示动画
- js批量设置样式的三种方法不推荐使用with
- js动态设置div的值下例子
- javascript设置金额样式转换保留两位小数示例代码
- JavaScript通过元素的ID和name设置样式
- 使用变量动态设置js的属性名
- js style动态设置table高度
- javascript动态设置样式style实例分析
- JavaScript动态设置div的样式的方法
相关文章
这篇文章主要为大家详细介绍了用JS实现贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
js静态方法与实例方法分析，需要的朋友可以参考下。2011-07-07
JavaScript控制一张图片旋转，每次旋转90度，可旋转一周360度，以前没见到过，也不知道有没有用，奉献给大家，希望喜欢2011-12-12
这篇文章主要介绍了JavaScript 判断数据类型的4种方法，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-09-09
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
本文是脚本之家小编日常整理些关于js兼容性问题，及IE与Firefox等常用浏览器的兼容性分析，对js浏览器兼容性相关知识感兴趣的朋友一起学习吧2016-03-03
这篇文章主要介绍了JS实现微信弹出搜索框 多条件查询功能的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-12-12
这篇文章主要介绍了Angularjs手动解析表达式（$parse）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-10-10
这篇文章主要为大家详细介绍了JavaScript实现京东放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了js判断某个方法是否存在的实例代码,可用于检测js中的方法是否可用,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
这篇文章主要给大家介绍了关于Javarscript中模块(module)、加载(load)与捆绑(bundle)的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-05-05
最新评论