当前位置:首页 > 开发 > 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

    震惊

    震惊

编辑推荐
在iOS中有一项功能,就是用户可以自定义设备的字体大小,粗体和其他一些样式。具体可以选择 “设置
使用EnterpriseLibary做数据库访问底层是我一贯的做法,除了其能兼容多种数据库,且使用其进行数据
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-T
照样先弄个图上来: 很多时候,我们都希望网站上面的按钮可以和网站的颜色相配 其实很简单,只要在
前几天我的教程里给出了一个作业,改变 ProgressBar 样式颜色。在这里分享一下源码。改变ProgressBa
语法: Object.style.property=new style; 注意:Object是获取的元素对象,如通过document.getElement
有网友问我怎么修改GridPanel#header的样式, 所以我就做了个例子 源码: <!DOCTYPE html PUBLIC "-
当今多数浏览器支持一下指针样式(将鼠标移动到样式名称上以观察指针样式改变为那个样式): auto mo
几天我的教程里给出了一个作业,改变 ProgressBar 样式颜色。在这里分享一下源码。改变ProgressBar
背景:四个LinearLayout,每个LinearLayout里都包含textView\EditText等控件;实现每个editText获得
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号