当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

JavaScript动态改变样式访问技术

发表于: 2014-11-10   作者:百合不是茶   来源:转载   浏览:
摘要:   一:style属性 格式:  HTML元素.style.样式属性="值";   创建菜单:在html标签中创建 或者 在head标签中用数组创建   <html> <head> <title>style改变样式</title> </head> &l

 

一:style属性

格式: 

 HTML元素.style.样式属性="值";

 

创建菜单:在html标签中创建 或者 在head标签中用数组创建

 

<html>
<head>
  <title>style改变样式</title>
</head>
<style type="text/css">
 
 li{
    font-size:12px;
	color:#000000;
	background-color:#f7f7f7;
	width:104px;
	height:33px;
	line-height:38px;
	float:left;
	list-style:none;
	text-align:center;
 }
</style>
<body>
	<ul>
      <li onmouseover="this.style.backgroundColor='#777777'"  onmouseout="this.style.backgroundColor='#f7f7f7'">新闻</li>
	  <li onmouseover="this.style.backgroundColor='#777777'"  onmouseout="this.style.backgroundColor='#f7f7f7'">视频</li>
	</ul>
</body>
</html>

 

 

js数组操作样式;

关键代码;

	<ul>
      <li>新闻</li>
	  <li>视频</li>
	  <li>小说</li>
	</ul>

 

 

 <script type="text/JavaScript">
 // document.getElementsByTagName("li"); 获取所有的li标签
 
   var len = document.getElementsByTagName("li"); 
   //为每一个li设置事件和效果
   for(var i=0;i < len.length;i++){
        len [i].onmouseover = function(){
		 this.style.background="#777777";
		 }
		len [i].onmouseout =  function(){
		  this.style.background="#f7f7f7";
		 }
   }
 </script>

 

 

 

二:ClassName属性

 

在HTML DOM中 className属性可设置元素或返回元素的class样式;语法

HTML元素.classname="样式名称";

 

在标签中实现,关键代码;

 .out{
    background-color:#f7f7f7;
 }
 .over{
  background-color:#777777;
 
 }
 
</style>
<body>
	<ul>
      <li onmouseover="this.className='over'" onmouseout="this.className='out'">新闻</li>
	  <li onmouseover="this.className='over'" onmouseout="this.className='out'">视频</li>
	</ul>
</body>

 

 

 

在js中使用className;

 

 

 

JavaScript动态改变样式访问技术

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号