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

最新推荐文章于 2022-06-03 11:29:14 发布

ios0213

最新推荐文章于 2022-06-03 11:29:14 发布

阅读量1.1k

点赞数

分类专栏： JavaScript DOM

本文链接：https://blog.csdn.net/ios0213/article/details/51465042

版权

JavaScript DOM 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

在用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

ios0213

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用脚本脚本实现修改CSS样式

在用CSS样式的时候，可能某些伪类在一些浏览器中得不到很好的支持，这个时候可以用JavaScript修改样式，从而实现自己想要的结果。伪类如 :hover 在一些浏览器中可能得不到很好的支持。下面是自己写的代码：无标题文档ul{ list-style-type:none;}li{ float:left; margin-right:30px;}
复制链接

扫一扫