您的位置：首页 > Web前端 > CSS

利用脚本脚本实现修改CSS样式

2016-05-20 22:55 507 查看

在用CSS样式的时候，可能某些伪类在一些浏览器中得不到很好的支持，这个时候可以用JavaScript修改样式，从而实现自己想要的结果。

伪类如 :hover 在一些浏览器中可能得不到很好的支持。

下面是自己写的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
ul{
list-style-type:none;
}
li{
float:left;
margin-right:30px;
}
</style>
</head>

<body>
<ul>
<li onMouseOver="ceh(this)" onMouseOut="deh(this)">147258</li>
<li onMouseOver="ceh(this)" onMouseOut="deh(this)">345789</li> /*this 参数为当前对象*/
<li onMouseOver="ceh(this)" onMouseOut="deh(this)">475962</li>
<li onMouseOver="ceh(this)" onMouseOut="deh(this)">749586</li>
</ul>

<script>
function ceh(whip)
{
whip.style.color="red";
whip.style.borderBottom="3px solid #F00"; /*JavaScript中样式采用camel标记法，参考资料如下*/
whip.style.fontSize="26px"; /*属性中需要去掉下划线，另外首字母小写，其他单词首字母均大写*/
}
function deh(whip)
{
whip.style.color="";
whip.style.borderBottom="";
whip.style.fontSize="";
}
</script>
</body>
</html>

参考资料如下：http://blog.csdn.net/betabin/article/details/7483220

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航