JavaScript6——JavaScript和CSS的交互

最新推荐文章于 2023-04-07 00:47:20 发布

千和儿

最新推荐文章于 2023-04-07 00:47:20 发布

阅读量1.6k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_47887988/article/details/123765040

版权

JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

9.1 样式表类型

9.1.1 行内样式

9.1.2 内部样式表

9.1.3 外部样式表

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>外部样式表</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<img src="images/video.jpg" class="video"/>商品名称：液晶电视<br />
商品编号：105428<br />
价格：7845元
</body>
</html>

class="video"在style.css里面。

9.2 JavaScript访问样式的常用方法

如何动态改变页面元素的样式？

使用getElement系列方法访问元素
改变样式属性：
- Style属性
- className属性

9.2.1 Style属性

9.2.2 使用style属性制作菜单

法一：（使用style改变样式）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用style改变样式</title>
<style type="text/css">
li{
	font-size: 12px;
	color: #ffffff;
	background-image: url(images/bg1.gif);
	background-repeat: no-repeat;
	text-align: center;
	height: 33px;
	width:104px;
	line-height:38px;
	float:left;
	list-style:none;
	}
</style>
</head>

<body>
<ul>
<li onmouseover="this.style.backgroundImage='url(images/bg2.gif)'" onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">资讯动态</li>
<li onmouseover="this.style.backgroundImage='url(images/bg2.gif)'" onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">产品世界</li>
<li onmouseover="this.style.backgroundImage='url(images/bg2.gif)'" onmouseout="this.style.backgroundImage='url(images/bg1.gif)'">市场营销</li>
</ul>

</body>
</html>

法二：（使用style改变样式）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用style改变样式</title>
<style type="text/css">
li{
	font-size: 12px;
	color: #ffffff;
	background-image: url(images/bg1.gif);
	background-repeat: no-repeat;
	text-align: center;
	height: 33px;
	width:104px;
	line-height:38px;
	float:left;
	list-style:none;
	}
</style>
</head>

<body>
<ul>
<li>资讯动态</li>
<li>产品世界</li>
<li>市场营销</li>
</ul>
<script type="text/javascript">
var len=document.getElementsByTagName("li");
for(var i=0;i<len.length;i++){
	len[i].onmouseover=function(){
		this.style.backgroundImage="url(images/bg2.gif)";
		}
	len[i].onmouseout=function(){
		this.style.backgroundImage="url(images/bg1.gif)";
		}	
		
	}

</script>
</body>
</html>

法三：（使用className改变样式）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用className改变样式</title>
<style type="text/css">
li{
	font-size: 12px;
	color: #ffffff;
	background-image: url(images/bg1.gif);
	background-repeat: no-repeat;
	text-align: center;
	height: 33px;
	width:104px;
	line-height:38px;
	float:left;
	list-style:none;
	}
.out{
	background-image: url(images/bg1.gif);
	}
.over{
	background-image: url(images/bg2.gif);
	color:#ffff00;
	font-weight:bold;
	cursor:hand;
	}
</style>
</head>

<body>
<ul>
<li onmouseover="this.className='over'" onmouseout="this.className='out'">资讯动态</li>
<li onmouseover="this.className='over'" onmouseout="this.className='out'">产品世界</li>
<li onmouseover="this.className='over'" onmouseout="this.className='out'">市场营销</li>
</ul>
   

</body>
</html>

法四：（使用className改变样式）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用className改变样式</title>
<style type="text/css">
li{
	font-size: 12px;
	color: #ffffff;
	background-image: url(images/bg1.gif);
	background-repeat: no-repeat;
	text-align: center;
	height: 33px;
	width:104px;
	line-height:38px;
	float:left;
	list-style:none;
	}
.out{
	background-image: url(images/bg1.gif);
	}
.over{
	background-image: url(images/bg2.gif);
	color:#ffff00;
	font-weight:bold;
	cursor:hand;
	}
</style>
</head>

<body>
<ul>
<li>资讯动态</li>
<li>产品世界</li>
<li>市场营销</li>
</ul>
<script type="text/javascript">
var len=document.getElementsByTagName("li");
for(var i=0;i<len.length;i++){
	len[i].onmouseover=function(){
		this.className="over";
		}
	len[i].onmouseout=function(){
		this.className="out";
		}	
		
	}   
</script>
</body>
</html>

9.2.3 随鼠标滚动的广告图片

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>随鼠标滚动的广告图片</title>
    <style type="text/css">
        #main{text-align:center;}
        #adver{
            position:absolute;
            left:50px;
            top:30px
            z-index:2;
        }
    </style>
    <script type="text/javascript">
    	var adverTop;//层距页面顶端距离
        var adverLeft;
        var adverObject;//层对象
        function inix(){
            adverObject=document.getElementById("adver");//获得层对象
            if(adverObject.currentStyle){
                adverTop=parseInt(adverObject.currenrStyle.top);
                adverLeft=parset(adverObject.currentStyle.left);
            }else{
                adverTop=parseInt(document.defaultView.getComputedStyle(adverObject,null).top);
      			adverLeft=parseInt(document.defaultView.getComputedStyle(adverObject,null).left);
            }
        }
        function move(){
			adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+"px";
			adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+"px";
		}  
		window.onload=inix;
		window.onscroll=move;
    </script>
</head>
<body>
<div id="adver"><img src="images/adv.jpg"/></div>
<div id="main"><img src="images/main1.jpg"/><img src="images/main2.jpg"/><img src="images/main3.jpg"/></div>
</body>

9.2.4 改变图片样式

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>改变图片边框样式</title>
<style type="text/css">
.out{border:solid 1px #eeeeee;}
.over{border:solid 2px #F60;}
</style>
</head>

<body><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/new_01.jpg" class="out" onmousemove="this.className='over'" onmouseout="this.className='out'" /></td>
    <td><img src="images/new_02.jpg" class="out" onmousemove="this.className='over'" onmouseout="this.className='out'"/></td>
    <td><img src="images/new_03.jpg" class="out" onmousemove="this.className='over'" onmouseout="this.className='out'"/></td>
  </tr>
</table>

</body>

9.2.5 获取样式的属性值

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>元素位置</title>
<style type="text/css">
body{
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: 200px;
}
#test{
	position:absolute;
      width:200px;
	  left:50px;
	  top:120px;
	  height:100px;
	  background-color:#F93;
	  }
</style>

<script type="text/javascript">
function place(){
	var divObj=document.getElementById("test");
	alert("上："+divObj.currentStyle.top+"\n左 ："+divObj.currentStyle.left);
	//divTop=document.defaultView.getComputedStyle(divObj,null).top;
   //divLeft=document.defaultView.getComputedStyle(divObj,null).left;
	//alert("上："+divTop+"\n左 ："+divLeft);
	}
</script>
</head>

<body>
<div  id="test" onclick="place()">测试</div>
</body>

千和儿

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
JavaScript6——JavaScript和CSS的交互

9.1 样式表类型9.1.1 行内样式9.1.2 内部样式表9.1.3 外部样式表<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>外部样式表</title><link rel="...
复制链接

扫一扫

专栏目录