使用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的样式的方法
相关文章
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
本文是脚本之家小编日常整理些关于js兼容性问题,及IE与Firefox等常用浏览器的兼容性分析,对js浏览器兼容性相关知识感兴趣的朋友一起学习吧2016-03-03Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
这篇文章主要给大家介绍了关于Javarscript中模块(module)、加载(load)与捆绑(bundle)的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。2017-05-05
最新评论