JavaScript动态改变样式访问技术

最新推荐文章于 2020-09-02 07:39:48 发布

最新推荐文章于 2020-09-02 07:39:48 发布 · 171 阅读

文章标签：

#JavaScript #style属性 #ClassName属性 #ViewUI

JavaScript基础专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用HTML和JavaScript动态地更改网页元素的样式。通过两种方式实现：一是利用style属性直接修改样式，二是通过更改元素的classname来切换不同的预定义样式。这两种方法都可用于创建响应式的用户界面。

一: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;