前言

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

复习: 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) {//显示输入框//找到当前行中的spanvar 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.parentElementvar 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'=classm3.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,直接操作:元素编号.stylead.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的统一资源定位标志，就是指网络地址。

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

JavaScript.05.JS和CSS的交互相关推荐

javascript（JS与css交互）详细介绍
一,JS与css交互基本概述 css有三种设置样式:行内样式,内部样式及外部样式 JavaScript获取css样式分两种情况:行内样式获取法和非行内样式获取法. 行内样式通过element.sty ...
javascript（js与css交互）
(1)CSS样式有三种类型:行内样式.内部样式和外部样式 (2)JavaScript获取CSS样式时分为两种情况:行内样式获取法和非行内样式获取法. /*1 行内样式通过element.styl ...
原生Javascript/原生JS修改CSS样式的四种方式
设置style var domName = document.querySelector('#domName'); domName.style.backgroundColor = '#aaa' 设置属 ...
JS与CSS交互及JavaScript 特效之四大家族
一.JS获取与CSS交互问题: (1)CSS样式有三种类型:行内样式.内部样式和外部样式 (2)JavaScript获取CSS样式时分为两种情况:行内样式获取法和非行内样式获取法 ...
JavaScript和css的交互.05
JavaScript和css的交互.05 本期内容操作css更改样式先写三个图片 <img id="m1" src="img/1.gif" alt=& ...
java js获取css方法_5种JavaScript和CSS交互的方法
原标题:5种JavaScript和CSS交互的方法随着浏览器不断的升级改进,CSS和Java之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合 ...
JavaScript使用localStorage缓存Js和css文件
对于WebApp来说,将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间.特别是当移端信号不好高延迟时优化效果还是很显见的下面的代 ...
html 点击增加样式,js点击添加css样式 css添加jq点击事件 JavaScript点击增加css样式...
js可实现点击后对div或者其他标签增加或者删除css样式,从而达到实现点击触发某种效果的目的.页面样式可以通过style修饰,也可以通过css修饰,改变css或者添加css可以改变页面的排版.代码如 ...
用JavaScript获取网页中的js、css、Flash等文件
目录一.前言二.从E书或网页中获取文件的一般步骤三.从E书或网页中获取链接进来的css文件四.从E书或网页中获取链接进来的js文件五.从E书或网页中获取Flash文件六.从E书或网页中获取 ...

JavaScript.05.JS和CSS的交互

前言