JavaScript05.JS与css交互_javascript与css交互案例以及教案-CSDN博客

本文介绍了如何使用JavaScript操作CSS样式，包括标签选择器、类选择器和ID选择器，并展示了直接操作style、设置class和通过标签class属性操作的方法。此外，还探讨了window滚动条事件的实现，以及利用JavaScript实现图片放大镜效果。内容涵盖了DOM编程的基础和实用技巧。

回顾：JavaScript04.DOM编程

前言：

css：层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML样式的计算机语言

目录

使用js代码操作css样式

标签选择器

class(类)选择器

id选择器

1.直接操作style

2.设置class

3.直接通过标签class属性操作

window滚动条事件

放大镜

使用js代码操作css样式

css样式需要写在head标签中,在style标签中进行操作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			<!--这里编辑css样式-->
		</style>
	</head>
	<body>

	</body>
</html>

标签选择器

通过需要修改的标签来定位,可以修改所有同一标签样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
            <!--标签选择器-->
            div{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		
		</style>
	</head>
	<body>
		
        <div id="a2">
			
		</div>
		<div id="a">
			
		</div>
		<div class="a">
			
		</div>
	
	</body>
</html>

class(类)选择器

通过定义的标签class来修改标签的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
            <!--类选择器-->
			.a{
				width: 100px;
				height: 100px;
				background-color: blue;
			}
			
		</style>
	</head>
	<body>
		<div id="a2">
			
		</div>
		<div id="a">
			
		</div>
		<div class="a">
			
		</div>
	</body>
</html>

id选择器

通过定义的标签id来修改该id下的标签样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			
            <!--id选择器-->
			#a{
				width: 100px;
				height: 100px;
				background-color: black;
			}
			
		</style>
	</head>
	<body>
		<div id="a2">
			
		</div>
		<div id="a">
			
		</div>
		<div class="a">
			
		</div>
	</body>
</html>

优先级：标签选择器<类选择器<id选择器

样式可修改的常用属性:

使用JS来修改css样式:

1.直接操作style

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            border: 10px solid green;
            box-shadow: 0px 0px 10px yellow;
        }
    </style>
</head>
<body>

<img id="m1" src="img/1.gif" alt="">

<p>
    <button onclick="fn1()">点我添加边框</button>
</p>
<script>

    function fn1() {
        //操作css的第一种方式:  直接操作style
        m1.style.border="5px solid black"
        m1.style.width="40px"
        m1.style.opacity=.5
    }

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

2.设置class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            border: 10px solid green;
            box-shadow: 0px 0px 10px yellow;
        }
    </style>
</head>
<body>

<img id="m2" src="img/2.gif" alt="">

<p>

    <button onclick="fn2()">点我添加边框</button>

</p>
<script>
    
    //通过设置class来操作
    function fn2(){
        m2.setAttribute("class","a")
    }

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

3.直接通过标签class属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            border: 10px solid green;
            box-shadow: 0px 0px 10px yellow;
        }
    </style>
</head>
<body>

<img id="m3" src="img/3.gif" alt="">

<p>

    <button onclick="fn3()">点我添加边框</button>

</p>
<script>
     
    //通过标签class属性来操作
    function fn3(){
        //class是关键字
        //标签中的class属性在js中都叫做className
        m3.className="a"
    }
</script>
</body>
</html>

window滚动条事件

在网页上，我们时常看到边框跟随的广告,那这种广告效果是如何实现的呢?接下来，我们使用这个案例来讲解:

关键代码:window.scroll

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ClassCode</title>
		<style type="text/css">
			
            <!--给广告框添加一个样式-->
            .a{
			     width: 500px;
			     height: 100px;
				 right: 20px;
				 top: 40px;
				 position: absolute;
				 background-color: aqua;
				 transition: .5s;
			}
		</style>
	</head>
	<body>
		<div id="d1" class="a">
		
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div>
			<h1>我是伞兵</h1>
		</div>
		<div id="d2" class="b">
			
		</div>
		<script type="text/javascript">
			   //使用onscroll来添加跟随效果
				window.onscroll=()=>{
					d1.style.top=40+document.documentElement.scrollTop+"px"
				}
				
		</script>
	</body>
</html>

放大镜

当鼠标移入图片的时候,图片会放大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background: red;
            position: absolute;
            /*设置事件全部无效*/
            pointer-events: none;
            display: none;
        }

    </style>
</head>
<body>
<img id="m1" src="img/1.gif" alt="">
<div id="div"></div>
<script>
    // onclick 点击事件
    // ondblclick 点击事件
    // onmouseover 鼠标移入事件
    // onmouseout 鼠标移出事件
    // onmousemove 鼠标移动事件

    m1.onmouseover=function (){
        div.style.display="block";
    }

    m1.onmouseout=function (){
        div.style.display="none";
    }

    m1.onmousemove=(e)=>{
        //需要事件对象 Event
        console.log(e.clientX,e.clientY)
        div.style.left=e.clientX-50+"px"
        div.style.top=e.clientY-50+"px"
        div.style.background="url("+m1.src+") center/cover"
    }
</script>
</body>
</html>

你要尽全力保护你的梦想。那些嘲笑你梦想的人，他们注定失败，他们想把你变成和他们一样。我坚信，只要心中有梦想，我就会与众不同。你也是。