技术标签: css html javascript
家人们,新的一天新的知识点,我们要开启新的课程啦,今天带大家学习如何使用JS操作css,大家有不懂得可以私信我,或者在下方评论噢,现在就让我带你们进入知识的海洋中。
语法:元素.style.样式名 = 样式值;
注意:
- 如果CSS的样式名中含有
-
,这种名称在JS中是不合法的。- 比如
background-color
需要将这种样式名修改为驼峰命名法。- 去掉
-
,将-
后的首字母大写 格式 : backgroundColor题目:操作style给图片设置边框
我们通过做题目来了解如何操作style,给大家上代码,代码都有详细备注
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img id="m1" src="img/1.gif">
<br>
<button onclick="fn1()">点我添加边框</button>
<script>
function fn1(){
// 操作css的第一种方法:直接操作style属性
// 给他设置一个边框
m1.style.border="5px solid black";
//使他变小width
m1.style.width="40px";
// 透明度
m1.style.opacity=.5;
}
</script>
</body>
</html>
题目:操作class属性设置边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* class名 */
.a{
/* 边框大小 solid:实线 green:给边框设置颜色 */
border: 10px solid green;
box-shadow: 0px 0px 10px yellow;
}
</style>
</head>
<body>
<img id="m2" src="img/2.gif">
<img id="m3" src="img/3.gif">
<br>
<button onclick="fn2()">点我添加边框</button>
<button onclick="fn3()">点我添加边框</button>
<script>
// 设置属性
function fn2(){
// setAttribute设置标签中的属性
// 设置该标签的class属性名为a class="a";
// 我们就可以具备了a里面的样式
m2.setAttribute("class","a");
}
// 操作class属性
function fn3(){
// class是关键字
// 标签中的class属性在js中叫做className;
m3.className="a";
}
</script>
</body>
</html>
题目一:完成一个类似广告的功能,广告跟着我们的滚动条移动
思路:1.我们要拿到滚动条移动的距离
2.广告跟着滚动条移动这里只需要沿着Y轴运动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border:2px solid black;
/*绝对布局的特点:可以随便调整位置*/
position: absolute;
/*top bottom left right*/
/* 离右边的距离为20px */
right: 20px;
/* 离左边的距离为40px */
top: 40px;
/* 移动间隔时间,可以不设置 */
transition: .1s;
}
</style>
</head>
<div id="d1">
<!-- 点击事件,点击时关闭广告 -->
<span onclick='d1.style.display="none"'>x</span>
<br>
<img src="img/4.gif">
</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>
<script>
// 想让图片跟着滚动条运动
// <window:窗口 -->
window.onscroll=()=>{
//获取到窗口滚动的距离 scrollTop
d1.style.top=40+document.documentElement.scrollTop+"px"
}
</script>
</body>
</html>
题目二:让一个东西跟着鼠标移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
/* 设置大小 */
width:180px;
height:180px;
background:red;
position: absolute;
}
</style>
</head>
<body>
<div id="d1"></div>
<script>
window.onmousemove=(e)=>{
// 拿到鼠标的x和y轴
// 让div跟着鼠标运动
// d1.style.left=e.clientX+"px";
// d1.style.top=e.clientY+"px";
// 如果想要我们鼠标在div的中间
// 减去中间的大小的一半,使鼠标在div正中间
d1.style.left=e.clientX-90+"px";
d1.style.top=e.clientY-90+"px";
}
</script>
</body>
</html>
题目三:放大镜功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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">
<div id="div"></div>
<script>
// 当移入到图片时显示出来
m1.onmouseover=(e)=>{
div.style.display="block";
}
// 当从图片移出时图片消失
m1.onmouseout=(e)=>{
div.style.display="none";
}
// 鼠标移动事件,当移入到图片的时候,div变成该图片
// 只在图片上面移动
m1.onmousemove=(e)=>{
div.style.left=e.clientX-50+"px";
div.style.top=e.clientY-50+"px";
// 当他移动到我们的图片上面时,我们让div变成图片的呀样子
// url位置的意思 来自于图片的src属性,拿到图片
// center/cover平铺的意思
div.style.background="url("+m1.src+") center/cover";
}
</script>
</body>
</html>
文章浏览阅读214次。#进入mysqlmysql –uroot -p#给指定ip赋权限GRANT ALL PRIVILEGES ON *.* TO 'ldq'@'172.69.7.251' WITH GRANT OPTION;#修改密码ALTER USER 'ldq'@'172.69.7.251' IDENTIFIED WITH mysql_native_password BY 'ldq2021';flush privileges;exit;MySQL8在实现远程连接(如远程phpmyadmin访问数据库服务器_mysql8一定要建用户组吗
文章浏览阅读8.3k次。from elasticsearch import Elasticsearches_client = Elasticsearch(["localhost:9200"])// 多个条件限制的删除delete_options ={"query":{ "bool":{ "must":[{"te..._删除requstes
文章浏览阅读544次。QNX 分区和文件系统制作_qnx 文件系统测试
文章浏览阅读236次。《七天数据可视化之旅》第一天 数据可视化过程Destiny,某物流公司数据产品经理,目前从事数据平台搭建和可视化相关的工作。持续学习中,期望与大家多多交流数据相关的技术和实际应用,共同成长。0x00 前言之前写过一篇文章,叫做数据可视化的基本流程,是站在可视化过程中的上下游关系,来梳理和介绍数据可视化的全过程,及其各个环节的主要工作内容。今天这篇文章,也是介绍数据可视化的过程,但是更多的是站在产品..._可视化工具的一天
文章浏览阅读4.1w次,点赞323次,收藏1.2k次。本文主要分为两个部分:第一部分重点介绍了注意力机制的原理、公式演变、评分函数以及多头注意力。第二部分重点介绍了自注意力机制的原理、优缺点以及和注意力机制的区别,并最后给出了单头和多头自注意力机制的图片示例。_注意力机制和自注意力机制
文章浏览阅读1.4w次。题目:这道题求动态和,最先考虑到的就是就是一个遍历累加的状态,仔细分析发现,其实新的数组只需要前面的和就好了,没必要多次遍历,那么这道题的思路就出来了代码如下:class Solution { public static int[] runningSum(int[] nums) { //定义长度 int length = nums.length; //初始化返回数组 int [] newNum = ne...
文章浏览阅读6.6k次。public class Script2 : MonoBehaviour{ Ray ray; RaycastHit hit; GameObject Obj; Vector3 _Obj屏幕坐标_; Vector3 _鼠标世界坐标_; Vector3 _Obj坐标差值_; float _水平旋转_; float _垂直旋转_; ...
文章浏览阅读542次。本站收集了华为路由器所有的登录地址;路由器登录地址可以登录到路由器的管理界面,然后设置路由器各项参数,如果你使用的是华为路由器,请在以下列表中找到路由器的登录地址。华为IP地址列表10.0.0.13810.0.0.210.0.20.1192.168.0.1192.168.1.1192.168.1.254192.168.100.1192.168.15.1192.168.2.1192.168.254...._华为路由器 linux 访问
文章浏览阅读1.7k次。IAR修改工程名方法_iar修改工程名字
文章浏览阅读1w次。在我们有两个Android Studio工程的情况时,我们想使用一个作为library工程导入到另一个工程作为一个module。我们可以使用Android Studio很容易的做到。让我们假设我们有两个工程:MyApplication和MyLibrary,我们想导入MyLibrary到MyApplication作为一个module。 首先我们需要从MyLibrary工程中找到m_android studio 将app moudel当做另一个moudel的依赖
文章浏览阅读40次。第一步:添加XMPP FrameWork For IOS需要添加的文件:第二步: 编译后发现有很多错误,那么需要添加其他扶助的类库第三步:ARC(只限没有使用ARC的项目)当所有类库都添加后,编译,我们会发现有很多黄色的警告,这..._ios xmpp 编译报错
文章浏览阅读321次。nm_:nm /u