js基础知识汇总10
使用dom操作css
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;}</style><script type="text/javascript">window.onload = function(){/** 点击按钮以后,修改box1的大小*///获取box1var box1 = document.getElementById("box1");//为按钮绑定单击响应函数var btn01 = document.getElementById("btn01");btn01.onclick = function(){//修改box1的宽度/** 通过JS修改元素的样式:* 语法:元素.style.样式名 = 样式值* * 注意:如果CSS的样式名中含有-,* 这种名称在JS中是不合法的比如background-color* 需要将这种样式名修改为驼峰命名法,* 去掉-,然后将-后的字母大写* * 我们通过style属性设置的样式都是内联样式,* 而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示* * 但是如果在样式中写了!important,则此时样式会有最高的优先级,* 即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失效* 所以尽量不要为样式添加!important* * * */box1.style.width = "300px";box1.style.height = "300px";box1.style.backgroundColor = "yellow";};//点击按钮2以后,读取元素的样式var btn02 = document.getElementById("btn02");btn02.onclick = function(){//读取box1的样式/** 语法:元素.style.样式名* * 通过style属性设置和读取的都是内联样式* 无法读取样式表中的样式*///alert(box1.style.height);alert(box1.style.width);};};</script></head><body><button id="btn01">点我一下</button><button id="btn02">点我一下2</button><br /><br /><div id="box1"></div></body>
</html>
读取元素的样式
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: yellow;}</style><script type="text/javascript">window.onload = function(){//点击按钮以后读取box1的样式var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");btn01.onclick = function(){//读取box1的宽度//alert(box1.style.width);/** 获取元素的当前显示的样式* 语法:元素.currentStyle.样式名* 它可以用来读取当前元素正在显示的样式* 如果当前元素没有设置该样式,则获取它的默认值* * currentStyle只有IE浏览器支持,其他的浏览器都不支持*///alert(box1.currentStyle.width);//box1.currentStyle.width = "200px";//alert(box1.currentStyle.backgroundColor);/** 在其他浏览器中可以使用* getComputedStyle()这个方法来获取元素当前的样式* 这个方法是window的方法,可以直接使用* 需要两个参数* 第一个:要获取样式的元素* 第二个:可以传递一个伪元素,一般都传null* * 该方法会返回一个对象,对象中封装了当前元素对应的样式* 可以通过对象.样式名来读取样式* 如果获取的样式没有设置,则会获取到真实的值,而不是默认值* 比如:没有设置width,它不会获取到auto,而是一个长度* * 但是该方法不支持IE8及以下的浏览器* * 通过currentStyle和getComputedStyle()读取到的样式都是只读的,* 不能修改,如果要修改必须通过style属性*///var obj = getComputedStyle(box1,null);/*alert(getComputedStyle(box1,null).width);*///正常浏览器的方式//alert(getComputedStyle(box1,null).backgroundColor);//IE8的方式//alert(box1.currentStyle.backgroundColor);//alert(getStyle(box1,"width"));var w = getStyle(box1,"width");alert(w);};};/** 定义一个函数,用来获取指定元素的当前的样式* 参数:* obj 要获取样式的元素* name 要获取的样式名*/function getStyle(obj , name){if(window.getComputedStyle){//正常浏览器的方式,具有getComputedStyle()方法return getComputedStyle(obj , null)[name];}else{//IE8的方式,没有getComputedStyle()方法return obj.currentStyle[name];}//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];}</script></head><body><button id="btn01">点我一下</button><br /><br /><div id="box1" ></div></body>
</html>
其他样式操作的属性
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;padding: 10px;border: 10px solid yellow;}#box2{padding: 100px;background-color: #bfa;}#box4{width: 200px;height: 300px;background-color: #bfa;overflow: auto;}#box5{width: 450px;height: 600px;background-color: yellow;}</style><script type="text/javascript">window.onload = function(){var box1 = document.getElementById("box1");var btn01 = document.getElementById("btn01");var box4 = document.getElementById("box4");btn01.onclick = function(){/** clientWidth* clientHeight* - 这两个属性可以获取元素的可见宽度和高度* - 这些属性都是不带px的,返回都是一个数字,可以直接进行计算* - 会获取元素宽度和高度,包括内容区和内边距* - 这些属性都是只读的,不能修改*///alert(box1.clientWidth);//alert(box1.clientHeight);//box1.clientHeight = 300;/** offsetWidth* offsetHeight* - 获取元素的整个的宽度和高度,包括内容区、内边距和边框*///alert(box1.offsetWidth);/** offsetParent* - 可以用来获取当前元素的定位父元素* - 会获取到离当前元素最近的开启了定位的祖先元素* 如果所有的祖先元素都没有开启定位,则返回body*/var op = box1.offsetParent;//alert(op.id);/** offsetLeft* - 当前元素相对于其定位父元素的水平偏移量* offsetTop* - 当前元素相对于其定位父元素的垂直偏移量*///alert(box1.offsetLeft);/** scrollWidth* scrollHeight* - 可以获取元素整个滚动区域的宽度和高度*///alert(box4.clientHeight);//alert(box4.scrollWidth);/** scrollLeft* - 可以获取水平滚动条滚动的距离* scrollTop* - 可以获取垂直滚动条滚动的距离*///alert(box4.scrollLeft);//alert(box4.scrollTop);//alert(box4.clientHeight); // 283//当满足scrollHeight - scrollTop == clientHeight//说明垂直滚动条滚动到底了//当满足scrollWidth - scrollLeft == clientWidth//说明水平滚动条滚动到底//alert(box4.scrollHeight - box4.scrollTop); // 600};};</script></head><body id="body"><button id="btn01">点我一下</button><br /><br /><div id="box4"><div id="box5"></div></div><br /><br /><div id="box3"><div id="box2" style="position: relative;"><div id="box1"></div></div></div></body>
</html>
练习
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#info{width: 300px;height: 500px;background-color: #bfa;overflow: auto;}</style><script type="text/javascript">window.onload = function(){/** 当垂直滚动条滚动到底时使表单项可用* onscroll* - 该事件会在元素的滚动条滚动时触发*///获取id为info的p元素var info = document.getElementById("info");//获取两个表单项var inputs = document.getElementsByTagName("input");//为info绑定一个滚动条滚动的事件info.onscroll = function(){//检查垂直滚动条是否滚动到底if(info.scrollHeight - info.scrollTop == info.clientHeight){//滚动条滚动到底,使表单项可用/** disabled属性可以设置一个元素是否禁用,* 如果设置为true,则元素禁用* 如果设置为false,则元素可用*/inputs[0].disabled = false;inputs[1].disabled = false;}};};</script></head><body><h3>欢迎亲爱的用户注册</h3><p id="info">亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册亲爱的用户,请仔细阅读以下协议,如果你不仔细阅读你就别注册</p><!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 --><input type="checkbox" disabled="disabled" />我已仔细阅读协议,一定遵守<input type="submit" value="注册" disabled="disabled" /></body>
</html>
事件对象
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">#areaDiv {border: 1px solid black;width: 300px;height: 50px;margin-bottom: 10px;}#showMsg {border: 1px solid black;width: 300px;height: 20px;}</style>
<script type="text/javascript">window.onload = function(){/** 当鼠标在areaDiv中移动时,在showMsg中来显示鼠标的坐标*///获取两个divvar areaDiv = document.getElementById("areaDiv");var showMsg = document.getElementById("showMsg");/** onmousemove* - 该事件将会在鼠标在元素中移动时被触发* * 事件对象* - 当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数,* 在事件对象中封装了当前事件相关的一切信息,比如:鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向。。。*/areaDiv.onmousemove = function(event){/** 在IE8中,响应函数被处罚时,浏览器不会传递事件对象,* 在IE8及以下的浏览器中,是将事件对象作为window对象的属性保存的*//*if(!event){event = window.event;}*///解决事件对象的兼容性问题event = event || window.event;/** clientX可以获取鼠标指针的水平坐标* cilentY可以获取鼠标指针的垂直坐标*/var x = event.clientX;var y = event.clientY;//alert("x = "+x + " , y = "+y);//在showMsg中显示鼠标的坐标showMsg.innerHTML = "x = "+x + " , y = "+y;};};</script>
</head>
<body><div id="areaDiv"></div><div id="showMsg"></div></body>
</html>
练习 方块随鼠标动
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;/** 开启box1的绝对定位*/position: absolute;}</style><script type="text/javascript">window.onload = function(){/** 使div可以跟随鼠标移动*///获取box1var box1 = document.getElementById("box1");//绑定鼠标移动事件document.onmousemove = function(event){//解决兼容问题event = event || window.event;//获取滚动条滚动的距离/** chrome认为浏览器的滚动条是body的,可以通过body.scrollTop来获取* 火狐等浏览器认为浏览器的滚动条是html的,*/var st = document.body.scrollTop || document.documentElement.scrollTop;var sl = document.body.scrollLeft || document.documentElement.scrollLeft;//var st = document.documentElement.scrollTop;//获取到鼠标的坐标/** clientX和clientY* 用于获取鼠标在当前的可见窗口的坐标* div的偏移量,是相对于整个页面的* * pageX和pageY可以获取鼠标相对于当前页面的坐标* 但是这个两个属性在IE8中不支持,所以如果需要兼容IE8,则不要使用*/var left = event.clientX;var top = event.clientY;//设置div的偏移量box1.style.left = left + sl + "px";box1.style.top = top + st + "px";};};</script></head><body style="height: 1000px;width: 2000px;"><div id="box1"></div></body>
</html>
冒泡
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 200px;height: 200px;background-color: yellowgreen;}#s1{background-color: yellow;}</style><script type="text/javascript">window.onload = function(){/** 事件的冒泡(Bubble)* - 所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发* - 在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡* *///为s1绑定一个单击响应函数var s1 = document.getElementById("s1");s1.onclick = function(event){event = event || window.event;alert("我是span的单击响应函数");//取消冒泡//可以将事件对象的cancelBubble设置为true,即可取消冒泡event.cancelBubble = true;};//为box1绑定一个单击响应函数var box1 = document.getElementById("box1");box1.onclick = function(event){event = event || window.event;alert("我是div的单击响应函数");event.cancelBubble = true;};//为body绑定一个单击响应函数document.body.onclick = function(){alert("我是body的单击响应函数");};};</script></head><body><div id="box1">我是box1<span id="s1">我是span</span></div></body>
</html>
冒泡
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;/** 开启box1的绝对定位*/position: absolute;}</style><script type="text/javascript">window.onload = function(){/** 使div可以跟随鼠标移动*///获取box1var box1 = document.getElementById("box1");//绑定鼠标移动事件document.onmousemove = function(event){//解决兼容问题event = event || window.event;//获取滚动条滚动的距离/** chrome认为浏览器的滚动条是body的,可以通过body.scrollTop来获取* 火狐等浏览器认为浏览器的滚动条是html的,*/var st = document.body.scrollTop || document.documentElement.scrollTop;var sl = document.body.scrollLeft || document.documentElement.scrollLeft;//var st = document.documentElement.scrollTop;//获取到鼠标的坐标/** clientX和clientY* 用于获取鼠标在当前的可见窗口的坐标* div的偏移量,是相对于整个页面的* * pageX和pageY可以获取鼠标相对于当前页面的坐标* 但是这个两个属性在IE8中不支持,所以如果需要兼容IE8,则不要使用*/var left = event.clientX;var top = event.clientY;//设置div的偏移量box1.style.left = left + sl + "px";box1.style.top = top + st + "px";};var box2 = document.getElementById("box2");box2.onmousemove = function(event){event = event || window.event;event.cancelBubble = true;};};</script></head><body style="height: 1000px;width: 2000px;"><div id="box2" style="width: 500px; height: 500px; background-color: #bfa;"></div><div id="box1"></div></body>
</html>
js基础知识汇总10相关推荐
- JS基础知识学习(一)
JS基础知识 前端开发常用的浏览器 谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核 欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...
- python基础知识资料-学习Python列表的基础知识汇总
千里之行,始于足下.要练成一双洞悉一切的眼睛,还是得先把基本功扎扎实实地学好.今天,本喵带大家仔细温习一下Python的列表.温故而知新,不亦说乎. 当然,温习的同时也要发散思考,因为有些看似无关紧要 ...
- (六)JS基础知识三(走进作用域和闭包)【三座大山之二,不会闭包,基本不会通过】
JS基础知识三(作用域和闭包) 提问 作用域 自由变量 闭包 this 提问 this的不同应用场景,如何取值 手写bind函数 实际开发中闭包的应用场景,举例说明 创建10个a标签,点击的时候弹出对 ...
- (四)JS基础知识一(深入分析变量类型和计算)【不会变量,别说你会JS】
JS基础知识一(变量类型和计算) 提问 变量类型 值类型 vs 引用类型 (堆栈模型) 值类型 引用类型 typeof 运算符 深拷贝 变量计算 字符串拼接 == if语句和逻辑运算 if语句 逻辑判 ...
- 了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
js基础知识中的作用域和闭包 一.作用域 1.作用域.自由变量简介 (1)作用域定义 (2)作用域实例演示 (3)自由变量定义 (4)自由变量实例演示 2.作用域链简介 (1)作用域链定义 (2)作用 ...
- 计算机网络把许多什么连接在一起,计算机网络技术基础知识汇总习题
计算机网络技术基础知识汇总习题 1.21世纪要实现信息化,就必须依靠完善的网络,这里的网络是指,向用户提供不同服务的 电信网络,有线电视网络和计算机网络三种网络.(电信网络,有线电视网络,计算机网络) ...
- js基础知识学习(二)
JS基础知识 JavaScript 数据类型转换 把其它数据类型转换为number类型 isNaN .Number.parseInt.parseFloat 在进行加减乘除数学运算的时候 true-&g ...
- 网络基础知识汇总学习
一.网线(双绞线)连接线的制作 双绞线制作有 568A 和 568B 两个标准,日常以 568B 标准较常用. 568B 标准按颜色排序为: 1- 橙白. 2- 橙.3- 绿白.4- 蓝. 5- 蓝白 ...
- Serdes基础知识汇总
Serdes基础知识汇总 从知乎https://zhuanlan.zhihu.com/p/423321485转载 在开始了解高速接口的时候,必然会涉及到SerDes.serdes的知识点实际上非常多, ...
- 前端学习笔记(js基础知识)
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型 常见的HTML事件 DOM 冒泡与捕获 流程控制语句 for..in 计时器 let,var,const的区别 ...
最新文章
- C++确定对象被使用前已先被初始化
- 【数据结构与算法】之深入解析“分数到小数”的求解思路与算法示例
- 服务器上使用docker安装部署禅道zentao
- html 图片防盗链,配置.htaccess文件实现图片防盗链
- WPF中XAML中使用String.Format格式化字符串示例
- 五、String字符串常用方法
- Vue的生命周期和钩子函数
- 勤哲excel服务器2017应用及无限用户
- 苹果ipad邮箱找不到服务器,ipad怎么设置qq邮箱?苹果ipad qq邮箱设置教程
- 【读书笔记】《认知语义学》序言
- Oracle对索引做统计,Oracle收集索引统计信息
- 第三阶段应用层——1.1 数码相册—软件框架
- 基于递归神经网络(RNN)的口语理解(SLU)
- *基于类平衡自我训练的无监督域自适应用于语义分割
- 【django】图形验证码接口设计、后端逻辑、前端逻辑【15】
- 洛谷 5061 秘密任务——二分图染色
- XV6 RISCV源码阅读报告之中断
- 概率论与数理统计期末复习题(3)
- 乐动圈圈显示无法连接服务器,win8系统安装乐动圈圈失败导致仙剑6无法安装如何解决...
- 3.3V转1.8V外围简单降压芯片
热门文章
- 自适应输出表格(ASP版)
- centos7yum安装VirtualBox
- 博客平台、Markdown编辑器与hexo admin简介
- 微信支付之获取code
- 数据库分库分表中间件 Sharding-JDBC 源码分析 —— SQL 路由(二)之分库分表路由...
- MySQL常用命令集锦
- FLASK安装--兼收EZ_INSTALL及PIP
- Thread.Sleep()
- bzoj 3676: [Apio2014]回文串
- 转:zTree高级入门:如何通过扩展节点的属性来达到是否显示节点的删除编辑等图标(按钮)...