JavaScript和css的交互.05

本期内容

操作css更改样式

先写三个图片

<img id="m1" src="img/1.gif" alt="">
<img id="m2" className="" src="img/2.gif" alt="">
<img src="img/3.gif" alt="">

然后写上一个按钮

<button onclick="fn1()" type="button">点我更换边框</button>

定义一个函数

<script>
function fn1(){//操作css的第一种方式：直接操作style//如:现在我们只改第一张 先给1图 取个id m1.style.border="5px solid black"注：后面一定要加单位(px)不然无效//透明度写法ma.style.opacity=.5
}
<script/>

如何给图2 具备图一所有样式

//再复制一个按钮
<button onclick="fn2()" type="button">点我更换边框</button>
<script>
function fn2(){//让fn2具备.a属性m2.setAttribute("class","a")//简写m2.className="a" //注：在这里不能用 class 因为它是一个关键字//用className
}
//在标题下面写一个
<style>
//里面写上//这个标签 只要你具备 class 为a 就生效.a{//添加属性border:10px solid green;box-shadow:0px 0px 10px yellow;}
<style/>
<script/>

使用js+css制作滑动广告

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{border: 2px solid black;/*绝对布局的特点：可以随便调整位置*/position: absolute;/*当我们设置了绝对布局我们就可以使用这四个属性（top bottom left right）*/right: 20px;//他的右边距离我的右边20pxtop: 40px;//他的高度距离我的高度40pxtransition: .1s;//这里设置他滚动的速度}</style>
</head>
<body>
<div id="ad"><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>
<script>//窗口的滑动事件window.onscroll=()=> {//箭头函数//获取到窗口滚动的距离 scrollTop//使用距离（40）加单位（px）ad.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;//设置绝对布局/*设置事件全部无效 css*/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就显示div.style.display="block";}m1.onmouseout=function (){div.style.display="none";}m1.onmousemove=(e)=>{//需要事件对象 Eventconsole.log(e.clientX,e.clientY)div.style.left=e.clientX-50+"px//设置和X轴一致  （.clientX-50）这里他的X轴-50和下面的Y轴-50 就是为了让 鼠标在 div 中 居中div.style.top=e.clientY-50+"px"//设置 左边和div.style.background="url("+m1.src+")center/cover"//background="url("+m1.src+")把背景设置为 图片}
</script>
</body>
</html>

通过js修改元素的样式

js菜单
1.写好样式；
2.写好函数；
3.不同事件调用不同函数。

当有很多行代码相同时，例如：

第一行
第二行
第三行
……
以上代码相同的，相同的
和事件
JS简化写思路：
1.获得
标签对象集合
2.循环集合中的对象，对象.事件=function(){}
代码：
var arr=document.getElementByTagName(“li”);
for(var i=0; i<arr.length; i++){
arr[i].className=“vb”;
arr[i].οnmοuseοver=function(){
this.className=“va”;
};
arr[i].οnmοuseοut=function(){
this.className=“vb”;
}
}

动态改变文字样式

图片跟随滚动条
获取类样式的方法：
currentStyle 只有IE有效
getComputedStyle() 除了IE

网页的三维：x,y,z
层的浮动：position:absolute;
top:20px;
left:20px;
right:20px;
bottom:20px;

滚动事件：
currentStyle
//得到当前样式
currentStyle.top //当前与top

与top的距离
与left的距离
scrollTop滚动距离

JavaScript和css的交互.05相关推荐

JavaScript6——JavaScript和CSS的交互
9.1 样式表类型 9.1.1 行内样式 9.1.2 内部样式表 9.1.3 外部样式表 <html xmlns="http://www.w3.org/1999/xhtml" ...
JavaScript与CSS的交互（五）
目录一,样式表 1.样式表中的三种选择器 2.样式表中的常见属性边框属性边界属性填充属性文本属性背景属性 2.三种样式表二,具体案例 1.鼠标悬停图片放大效果 2.实现广告悬停的效果 3 ...
javascript与css的交互
目录一.通过js修改元素的样式二.js菜单1.写好样式:2.写好函数:3.不同事件调用不同函数. //window滚动事件window.οnscrοll=mymove; 目标: 1.使用style ...
java js获取css方法_5种JavaScript和CSS交互的方法
原标题:5种JavaScript和CSS交互的方法随着浏览器不断的升级改进,CSS和Java之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合 ...
5种你未必知道的JavaScript和CSS交互的方法
随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.cs ...
5种JavaScript和CSS交互的方法
英文 | https://davidwalsh.name/ways-css-javascript-interact 译文 | https://www.webhek.com/post/ways-css- ...
响应式网页设计之JavaScript与CSS交互
JavaScript与CSS交互补充:文章中所有的代码都是写在html文件中,JS代码需要用< script >< /script >标签包起来. 文章目录 JavaScri ...
jQuery基础与JavaScript与CSS交互-第五章
目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器掌握过滤选择器掌握表单选择器 RIA技术常见的RIA技术 - Ajax - Sliverlight ...
javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Jav ...

JavaScript和css的交互.05

JavaScript和css的交互.05

本期内容

操作css更改样式

使用js+css制作滑动广告

制作放大镜

JavaScript和css的交互.05相关推荐

最新文章

热门文章