JavaScript.05.JS和CSS的交互

最新推荐文章于 2023-03-20 09:51:30 发布

小阿飞_

最新推荐文章于 2023-03-20 09:51:30 发布

阅读量580

点赞数 8

分类专栏： JS 文章标签： css javascript 前端 html

本文链接：https://blog.csdn.net/yifei_345678/article/details/123275874

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言

本期文章相比之前的文章简单，所以小阿飞先带大家回顾一下上期文章需要记忆的点，在学习代码过程中，有些单词并不用记全，但是要记住那些常用单词的样子和所代表的含义，然后再根据提示打出即可：

复习: dom 文档对象模型关系
*父子关系：
parent() 取父节点
         children() 子节点
         firstElementChild 第一个子节点
lastElementChild 最后一个子节点
*兄弟关系：
上一个 previous
下一个 next
*操作：
            父元素.appendChild('标签名') 追加
document.createElement('标签名') 创建标签
父元素.removeChild('该父元素下的子元素名')删除子元素
父元素.replaceChild() 替换节点
element.cloneNode(true|false) 复制节点
element.getAttribute() 获得元素上的属性
          element.setAttribute('属性名','要设置的内容') 设置属性
*表格：
table.rows : 表格中的行的集合
  row.cells : 一行中的列的集合
table.insertRow(i) : 在表格中为i的位置插入一行
        row.insertCell(i) : 在行中为i的位置插入一列
table.deleteRow(i) : 删除第i行

这里还为大家提供一份JS表格中操作表格的详细代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JS中操作表格</title>
    <style>
        input{
            width: 40px;
        }

    </style>
</head>
<body>
<table border id="table">
    <tr>
        <td>商品名字</td>
        <td>商品价格</td>
        <td>商品介绍</td>
        <td>商品操作</td>
    </tr>
    <tr>
        <td><span>苹果</span></td>
        <td><span>9.9</span></td>
        <td><span>最好吃的苹果</span></td>
        <td>
            <button onclick="delRow(this)">删除</button>
            <button onclick="updRow01(this)">修改</button>
        </td>
    </tr>
</table>
<button onclick="addRow()">添加购物车</button>
<script>

    function updRow01(btn) {//显示输入框
        //找到当前行中的span
        var tr=btn.parentElement.parentElement
        //拿到页面上所有的span标签
        //遍历span标签集合
        //将span标签改成输入框
        // HtmlCollection 会根据页面中的元素变化而变化
        // 将Collection集合变成数组 数组是不会根据页面中的元素变化而变化的
        var spans=Array.from(tr.getElementsByTagName("span"))
        for(let s of spans){
            //s就是每一个span标签
            //将值给到变化之后的输入框
            var text=s.textContent//s.textContent:span标签的值
            //outerHTML可以包到整个标签和标签的内容
            //将span标签的值拼接上去而不能:"<input value='text'>"
            //"<input value=''>"
            //"<input value='"a"'>"
            //a=+text+才是正确的操作
            s.outerHTML="<input value='"+text+"'>"
        }
        //点解修改后将按钮的内容变成完成
        btn.textContent="完成"
        //并且在点击修改按钮时调用updRow02(this)函数
        btn.setAttribute("onclick","updRow02(this)")
    }
    function updRow02(btn) {//修改功能
        var tr=btn.parentElement.parentElement
        var is=Array.from(tr.getElementsByTagName("input"))
        for(let s of is){//is是放input输入框的数组
            var text=s.value//重新得到输入框的值s.value再拼接上去
            s.outerHTML="<span>"+text+"</span>"
        }
         //点解完成后将按钮的内容变成完成
        btn.textContent="修改"
        //并且在点击完成按钮时调用updRow01(this)函数
        btn.setAttribute("onclick","updRow01(this)")
    }
    function delRow(btn) {
        //btn就是你点击的那个按钮
        var tr=btn.parentElement.parentElement
        //将标签本体直接改为空字符串
        tr.outerHTML=""
    }
    function addRow() {
        //元素.innerHTML=``反斜杠中可以直接放要添加的html元素和元素内容
        table.innerHTML+=`
            <tr>
                <td><span>美鲤煎</span></td>
                <td><span>99.0</span></td>
                <td><span>fdsajgda</span></td>
                <td>
                    <button onclick="delRow(this)">删除</button>
                    <button onclick='updRow01(this)'>修改</button>
                </td>
            </tr>
` ;
    }
</script>
</body>
</html>

以上代码中updRow01(btn)和updRow02(btn)其实可以合并成一个函数,这里就留给大家思考了^_^

正文内容：

一，使用CSS更改标签样式

1.什么是CSS

CSS英文全称：Cascading Style Sheets，即层叠样式表，也叫级联样式表。

是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2.如何使用CSS更改标签样式

其实使用CSS更改标签样式在前几期文章中都有使用，只是没有明确地提出这个概念，比如下面这些按钮概念的实现都用到了使用CSS更改标签样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
		/*Class选择器,具备class属性且class=a的标签就具备选择器中的属性*/
        .a{
            border: 10px solid green;
            box-shadow: 0px 0px 10px yellow;
        }
    </style>
</head>
<body>
<img id="m1" src="img/1.gif" alt="">
<img id="m2" src="img/2.gif" alt="">
<img id="m3" src="img/3.gif" alt="">
<p>
    <button onclick="fn1()">点我</button>
    <button onclick="fn2()">点我添加边框</button>
    <button onclick="fn3()">让第3张图具备第2张的样式</button>
</p>
<script>
    function fn1() {
        //操作css的方式:直接操作:元素编号.style.你要操作的属性
        m1.style.border="5px solid black"
        m1.style.width="40px"
        m1.style.opacity=.5
    }
    function fn2(){
		// 2,使用elenemt.中的方法
        m2.setAttribute("class","a")//则具备class选择器的样式
    }
    function fn3(){
        //class是关键字
        //class是关键字,标签中的'class属性'在js中都叫做'className'=class
        m3.className="a"//则具备class选择器的样式
    }
</script>
</body>
</html>

相信这种使用CSS更改标签样式的方式并没有很难，只需记住是用：

元素编号.style样式.你要操作的属性

就可以了

依次点击三个按钮后运行效果如下：

二，使用scrollTop制作随鼠标滚动的广告图片

补充知识：

网页上与滚动条有关的属性：

制作随鼠标滚动的广告图片的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用scrollTop制作随鼠标滚动的广告图片</title>
    <style>
        div{
			/* 给广告加边框 */
            border: 2px solid black;
            /*绝对布局(absolute)的特点：可以随便调整位置*/
			/*在position中设置absolute后,div元素就会浮出起html上，
			元素就可以任意移动不受限制*/
            position: absolute;
            /*设置absolute后就会有这几个属性top bottom left right*/
			/* right代表div元素与网页的右边的距离,top bottom left同理 */
            right: 20px;
            top: 40px;
            transition: .1s;
        }
    </style>
</head>
<body>
	<!-- 广告界面div -->
<div id="ad">
	<!-- 关闭按钮 点击时消失ad.style.display='none-->
    <button onclick="ad.style.display='none'">x</button>
    <br>
	<!-- 广告图片 -->
    <img src="img/4.gif" alt="">
</div>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<p>淘宝，淘你所爱</p>
<script>//JS
    //窗口的滑动(window.onscroll)事件:让div广告跟随网页滚动条滑动
	// 原理:滚动条向下或向上滚动多少,就给div的Top属性增加多少
    window.onscroll=()=> {//箭头函数
		// 使用文档点出文档元素document.documentElement
		//再获取到窗口滚动条滚动的距离 scrollTop
		//操作css的第一种方式:1,直接操作:元素编号.style
        ad.style.top=40+document.documentElement.scrollTop+"px"//原来top=40,记得带单位px
    }
</script>
</body>
</html>

运行效果如下：当鼠标滑动网页上的滚动条时，广告也会跟着滑动

点击“X”这个按钮时广告就会消失：

图片上的放大镜

补充知识：

鼠标指针位置坐标

clientX事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。

客户区指的是当前窗口，语法：event.clientX

clientY 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（客户区）的垂直坐标。

客户区指的是当前窗口，语法：event.clientY

简单的运用一下这些属性叭：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
				/* ID选择器 */
		        div{
		            width: 100px;
		            height: 100px;
		            background: red;
		            position: absolute;
		        }
		 </style>
	</head>
	<body>
		<script>
				// 使用body的简写：document.body
				// 如果使用鼠标事件对象,就要用下面这种JS方式使用,不能在标签中使用
				document.body.onmousemove=(e)=>{//随意写一个参数e,这个参数是由js自动传入的
					console.log('鼠标移入了')//查看body的大小：见图
					console.log(e.clientX,e.clientY)//e即对象
					//x轴在原有基础上x/y轴-减50就可以让鼠标位于方块中心
                    div.style.left=e.clientX-50+'px'
					div.style.top=e.clientY-50+'px'//y轴
				}
		</script>
		<div id="div"></div>
	</body>
</html>

在控制台查看鼠标移动的坐标：

结合上面这些知识，你能实现图片上的放大镜功能吗？代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
				/* ID选择器 */
		        div{
					/* 将图片放在div放大镜方块上时把图片设置大一些就有放大镜效果了 */
		            width: 300px;
		            height: 300px;
		            background: blue;
		            position: absolute;
					/* 设置鼠标事件pointer-events全部无效 */
					/* 这样虽然鼠标在div方块上,但是鼠标事件会透过div标签变成移入图片的事件 */
					pointer-events: none;
					display: none;//在网页打开时就将div隐藏
		        }
		 </style>
	</head>
	<body>
		<img id="img1" src="img/3.gif" >
		<!-- div是放大镜 -->
		<div id="div"></div>
		<script>
			// 给img标签设置事件(只有当鼠标点击到了才会触发,
			// 而div标签本来就跟随鼠标移动,鼠标一开始就是在div标签上的,所以不会触发下列事件)
				img1.onmouseover=function (){//鼠标移入要放大的图片时让方块出现
					div.style.display='block'
				}
				img1.onmouseout=function (){
					div.style.display='none'//鼠标移出要放大的图片时让方块消失
				}
				img1.onmousemove=(e)=>{//随意写一个参数e,这个参数是由js自动传入的
					console.log(e.clientX,e.clientY)//e即对象
					//x轴在原有基础上x/y轴-减50就可以让鼠标位于方块中心：
                    div.style.left=e.clientX-150+'px'
					div.style.top=e.clientY-150+'px'//y轴
					//将div的内容设置为要放大的图片
					//'url(a) center/cover'
					// a=('+img1.src+')
					div.style.background='url('+img1.src+') center/cover'//这里记得把图片设置平铺
				}
				
		</script>		
	</body>
</html>

运行起来是这样的，其实还需要优化，关注小阿飞，后续为您优化^_^

这里用到了URL（统一资源定位符）定位图片路径，我来为大家简单地介绍一下什么是URL叭：

URL格式：

全称：Uniform Resource Locator,统一资源定位器

运用平台：网络

在WWW上，每一信息资源都有统一的且在网上唯一的地址，该地址就叫URL，它是WWW的统一资源定位标志，就是指网络地址。

本期文章到这里就结束了，感谢大家的阅读

小阿飞_

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript.05.JS和CSS的交互

前言本期文章相比之前的文章简单，使用CSS更改标签样式1.什么是CSSCSS英文全称：Cascading Style Sheets，即层叠样式表，也叫级联样式表。是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。..
复制链接

扫一扫