第十六讲 JavaScript与CSS交互

最新推荐文章于 2025-02-17 18:08:38 发布
原创 最新推荐文章于 2025-02-17 18:08:38 发布 · 317 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文介绍了JavaScript如何与CSS进行交互，包括通过style属性修改样式、隐藏和显示元素、切换className以及实现拖拽事件。提供了四个实践案例，涉及背景颜色改变、文本隐藏显示、列表项样式切换和元素拖放功能。同时给出了两个课堂作业，分别是输入验证和颜色变化动画的实现，旨在巩固所学知识。

系列课程目录

第十六讲 JavaScript与CSS交互

目录

前言

JavaScript与CSS交互

提示：以下是本篇文章正文内容，下面案例可供参考

一、JavaScript与CSS交互

1.style属性

  • 通过元素的style属性，可以获取或修改元素的CSS样式
    在这里插入图片描述

如CSS中，字体大小为font-size, 使用style属性时，需改为fontSize

练习创建三个按钮，对应三种颜色，点击按钮时，将页面背景修改为对应颜色
在这里插入图片描述
在这里插入图片描述

2.隐藏元素

在这里插入图片描述
在这里插入图片描述
练习创建一段文本，文本下方放置两个按钮，点击按钮可隐藏/显示上方文本。分别尝试visibility和display两种方式实现
在这里插入图片描述
在这里插入图片描述

3.修改className更改样式

  • 通过修改元素的所属类，并对不同的类设置相应样式，同样可达到更改样式的目的

在这里插入图片描述
在这里插入图片描述
练习创建一个列表，当鼠标移入列表中某一项时，为该项添加lg-red类（设置如上），鼠标移出时，移除该类

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.lg-red{
				font-size: 20px;
				color: red;
			}
		</style>
	</head>
	<body>
		<ul>
			<li onmouseenter="mv()" onmouseleave="lv()">苹果</li>
			<li onmouseenter="mv()" onmouseleave="lv()">香蕉</li>
			<li onmouseenter="mv()" onmouseleave="lv()">橙子</li>
			<li onmouseenter="mv()" onmouseleave="lv()">菠萝</li>
		</ul>
		<script type="text/javascript">
			function mv(){
				event.target.className="lg-red"
			}
			function lv(){
				event.target.className=""
			}
		</script>
	</body>
</html>

4.拖拽事件

  • 将需要拖拽的源对象的dragable属性设为true

在这里插入图片描述

  • 给目标对象绑定ondragover事件函数，禁用其默认事件行为
    在这里插入图片描述

源对象

  • ondragstart事件
    用户开始拖动元素时触发

  • ondrag事件
    元素正在拖动时触发

  • ondragend事件
    用户完成元素拖动后触发

目标对象

  • ondragenter事件
    当被鼠标拖动的对象进入其容器范围内时触发

  • ondragover事件
    当被拖动的对象在容器范围内时触发

  • ondragleave事件
    当被拖动的对象离开容器时触发件

  • ondrop事件
    源元素被拖入容器内，并且释放鼠标时触发

练习使目标文本变为可拖动状态，让其可以在两个容器之间来回拖动
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container{
				width:200px;
				height: 200px;
				border: 1px solid black;
				margin-top: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div class="container" ondragover="sj()" ondrop="drop()">
			<p draggable="true" ondragstart="drag()">目标文本</p>
		</div>
		<div class="container" ondragover="sj()" ondrop="drop()">
			
		</div>
		<script type="text/javascript">
			var qjbl
			function sj(){
				 event.preventDefault();
			}
			function drag(){
				qjbl=event.target
			}
			function drop(){
				event.preventDefault();
				event.target.appendChild(qjbl)
			}
		</script>
	</body>
</html>

二、课堂作业

1.按照要求完成任务

如下（示例）：

在这里插入图片描述

在这里插入图片描述

2.解析代码

  • 任务16-1
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.error {
				border: 2px solid #f95d5d;
				box-shadow: 0px 0px 5px 0px #f95d5d;
			}
		</style>
	</head>
	<body>
		&nbsp;&nbsp;&nbsp;用户名：<input type="text" name="" id="yhm" value="" onchange="check()" /><br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;密码：<input type="password" name="" id="mm" value=""
			onchange="mm_check()" /><br>
		确认密码：<input type="password" name="" id="qrmm" value="" onchange="mm_check()" /><br>
		<input type="button" name="" id="" value="提交" onclick="tj_check()" />
	</body>
	<script type="text/javascript">
		var pattern = /^\w{4,16}$/
		var yhm = document.getElementById("yhm")
		var mm = document.getElementById("mm")
		var qrmm = document.getElementById("qrmm")

		function check() {
			if (!pattern.test(event.target.value)) {
				event.target.className = "error"
			} else {
				event.target.className = ""
			}
		}

		function mm_check() {
			if (mm.value == qrmm.value || qrmm.value == "") {
				mm.className = ""
				qrmm.className = ""
			} else {
				qrmm.className = "error"
			}
		}

		function tj_check() {
			if (yhm.value == "") {yhm.className="error"}
			if (mm.value == "") {mm.className="error"}
			if (qrmm.value == "") {qrmm.className="error"}
		}
	</script>
</html>
  • 任务16-2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@keyframes f {
				0% {
					background-color: red;
				}

				50% {
					background-color: darkred;
				}

				100% {
						{
						background-color: red;
					}
				}
			}

			@keyframes t {
				0% {
					background-color: green;
				}

				50% {
					background-color: darkgreen;
				}

				100% {
						{
						background-color: green;
					}
				}
			}

			.container {
				width: 200px;
				height: 200px;
				border: 1px solid black;
				margin-top: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			#container {
				display: flex;
				justify-content: space-between;
			}

			.r1,
			.r2,
			.r3 {
				width: 198px;
				height: 198px;
				border-radius: 50%;
			}

			.r1 {

				background-color: yellow;
			}

			.r2 {

				background-color: pink;
			}

			.r3 {

				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div id="container">


			<div>
				<div class="container" ondragover="sj()" ondrop="drop()">
					<div class="r1" id="r1" draggable="true" ondragstart="drag()" style="color: yellow;">

					</div>
				</div>
				<div class="container" ondragover="sj()" ondrop="drop()">
					<div class="r2" id="r2" draggable="true" ondragstart="drag()" style="color: pink;">

					</div>
				</div>
				<div class="container" ondragover="sj()" ondrop="drop()">
					<div class="r3" id="r3" draggable="true" ondragstart="drag()" style="color: skyblue;">

					</div>
				</div>
			</div>


			<div>


				<div class="container" id="skyblue" ondragover="sj()" ondrop="drop()" value="123"
					style="border-color:skyblue;">

				</div>
				<div class="container" id="pink" ondragover="sj()" ondrop="drop()" value="123"
					style="border-color:pink;">

				</div>
				<div class="container" id="yellow" ondragover="sj()" ondrop="drop()" value="123"
					style="border-color:yellow;">

				</div>

			</div>
		</div>
		<script type="text/javascript">
			var vl

			function sj() {
				event.preventDefault();
			}

			function drag() {
				vl = event.target
			}

			function drop() {
				event.preventDefault();
				event.target.appendChild(vl)
				if ((document.getElementById("skyblue").children.length!=0) && (document.getElementById("pink").children.length!=0
					) && (document.getElementById("yellow").children.length!=0)) {

					if (("r3" == document.getElementById("skyblue").children[0].id) && ("r2" == document.getElementById("pink")
							.children[0].id) && ("r1" == document.getElementById("yellow").children[0].id)) {
						document.body.style.backgroundColor = "green"
						document.body.style.animationName = "t";
						document.body.style.animationDuration = "1s";
						document.body.style.animationIterationCount = "infinite";
					} else {
						document.body.style.backgroundColor = "red"
						document.body.style.animationName = "f";
						document.body.style.animationDuration = "1s";
						document.body.style.animationIterationCount = "infinite";
					}
				}else{
					document.body.style.backgroundColor = "white"
					document.body.style.animationName = "";
					document.body.style.animationDuration = "";
					document.body.style.animationIterationCount = "";
				}
			}
		</script>
	</body>
</html>
鵼鷡
关注
JavaScript 与 CSS 变量交互：利用 setProperty 动态修改 CSS 变量实现主题切换
weixin_41455464的博客
12-14 444
一个好的主题切换系统始于清晰、语义化的CSS变量命名。变量名应该描述其用途，而不是其当前的值。例如，比--blue更好，因为主色可能在不同主题中变为红色或绿色。/* base-theme.css (或直接放在 style 标签中) */:root {/* 颜色 *//* 页面背景 *//* 主要文本颜色 *//* 主操作色/品牌色 *//* 次要操作色 *//* 强调色 *//* 边框颜色 *//* 卡片背景 *//* 代码块背景 *//* 链接颜色 *//* 字体 */
CSS进阶-第十六篇：CSS 动画与交互提升-高级动画（二）：多动画协同
最新发布
无
04-11 125
在现代网页设计中，通过让多个动画协同工作，可以创造出极具吸引力和动态感的用户体验。这涉及到在一个元素上应用多个动画、控制动画的同步与顺序，以及借助 JavaScript 实现更灵活的动画控制。
JavaScript与CSS交互
Cherubim_Angels的博客
05-05 187
文章目录一、style属性二、隐藏元素三、className属性四、拖拽事件 一、style属性 在HTML DOM中，style是一个对象，代表一个单独的样式声明，可从应用样式的文档或元素访问style对象，使用style属性改变样式的语法如下： HTML元素.style.样式属性='值' 二、隐藏元素 属性 值 区别 visibility visible/hidden 将元素设为不可见，但占用空间 display none/block/inline-block 将元素隐藏，不占用
JavaScript_04 快速入门 JS与CSS的交互
m0_60786924的博客
03-19 527
一、JS获取与CSS交互 问题: （1）CSS样式有三种类型：行内样式、内部样式和外部样式 （2）JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法。 1.1 行内样式 通过element.style.attr（元素.style.属性）即可获取可设置 ......
javascript 获取特定的 CSS属性值
gyk20000215的博客
09-25 445
Example Source Code global.css声明 &nbsp;Example Source Code #myArticle{ width:400px; height:300px; } ... 　　这样情况，直接通过JS进行getElementById(’myArticle’).style.width无法获取400px值，因这数值定CSS里，所，必须其方法，写函数： &nbs...
JavaScript和CSS的交互
m0_67331668的博客
03-04 617
又到了每日一分享的时候啦，今天给大家带来的是JavaScript和CSS的交互（主要是例题哦），话不多说让我们一起往下看吧。 一、本次任务 制作鼠标移动特效 制作随鼠标滚动的广告图片 二、常见样式 三、style对象的常用属性 四、JavaScript中常用的事件列表 五、任务的实现 《1》制作鼠标移动特效 设置div并添加到界面 <!DOCTYPE html> <html> <head> <meta char...
javascript（js与css交互）
Bugxiu_fu的博客
03-13 789
（1）CSS样式有三种类型：行内样式、内部样式和外部样式 （2）JavaScript获取CSS样式时分为两种情况：行内样式获取法 和 非行内样式获取法。 /*1 行内样式 通过element.style.attr（元素.style.属性）即可获取可设置*/ // 获取行内式样式(带单位) console.log(oDiv.style.width); // 获取非行内式样式(null) console.log(oDiv.style.height); /*2.非行内样式获取法*/ getCompute
第十六天 HarmonyOS WebView开发实战：从加载网页到与JavaScript交互
IT深耕十余载，大道之简
02-17 1675
通过本文的实践指导，开发者可以全面掌握HarmonyOS中WebView的核心使用方法。从基础网页加载到深度混合开发，从性能优化到调试技巧，这些知识将帮助您构建高效、稳定的Web混合应用。建议读者结合官方文档和实际项目需求，持续探索WebView的更多可能性。
精选资源
jsstyle:使用 JavaScript 操作 CSS
07-13
`querySelector` 返回匹配指定CSS选择器的第一个元素，而`querySelectorAll` 返回所有匹配的元素集合。 2. **元素样式**：一旦选择了元素，你可以通过 `element.style` 属性来访问和修改其内联样式。例如，`element...
WebUI可视化基础：HTML/CSS/JavaScript与前后端交互
资源摘要信息:"WebUI可视化：第2章：技术基础准备" 知识点: HTML基础 - 文档类型声明<!DOCTYPE html>用于告诉浏览器该文档的HTML版本，确保文档按照规范正确显示。 - 根元素包裹整个页面，是所有HTML标记的容器。 -...
javascript(js与css交互）
weixin_64549900的博客
03-09 884
<table border="1" cellpadding="0" cellspacing="0" width="60%" > <tr> <td><input id="all" type="checkbox">全选</td> <td><input onclick="myCheck(this,'01',4,6);" type="checkbox">1月</td> <td>.
JavaScript和css的交互
weixin_62270300的博客
03-04 852
目录 样式表回顾 1.样式表的三种选择器 标签选择器 Id选择器 类选择器 2.样式常见属性 3.样式表 内部样式表 外部样式表 案例1：动态改变图片的边框样式 案例2：随鼠标滚动的广告图片 案例3：图片放大镜效果 总结： 样式表回顾 1.样式表的三种选择器 标签选择器 代码示例如下： <style> input{ width:120px; border:solid 1px #ff0000; } </style> Id选择器 .
javascript与css的交互
qq_73126462的博客
04-07 245
目标：1.使用style属性制作菜单特效；2.使用className属性制作菜单特效；3.使用scrollTop制作随鼠标滚动的广告图片；
JavaScript和CSS的交互（一）
u010286754的专栏
06-20 1204
使用JavaScript控制CSS样式，也就是CSS特效这就是接下来就是我将要描述的内容。 1.  在CSS样式中，制作CSS样式的语法由三部分构成：选择器 ，属性， 和 值         例如:        body{           color:#000 ; font-size:12px;               }         选择器通常又分为标签选择器，id选择
5种你未必知道的JavaScript和CSS交互的方法
u011574239的专栏
04-06 522
随着浏览器不断的升级改进，CSS和JavaScript之间 的界限越来越模糊。本来它们是负责着完全不同的功能，但最终，它们都属于网页前端技术，它们需要相互密切的合作。我们的网页中都有.js文件和.css文 件，但这并不意味着CSS和js是独立不能交互的。下面要讲的这五种JavaScript和CSS共同合作的方法你也许未必知道！ 用JavaScript获取伪元素(pseudo-elemen
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值