摘要: 我们可以写一个让小方块运动的函数: 1 div#demo { 2 width: 100px; 3 height: 100; 4 position: absolute; 5 left: 0; 6 top: 0; 7 } 8 9 10 var div = document.getElementById( 阅读全文
posted @ 2018-12-06 23:26 Panda-Q 阅读(268) 评论(0) 推荐(0) 编辑
摘要: 查询计算样式 window上面有一个方法叫做getComputedStyle可以来获取元素的计算样式,也就是css样式。 1 window.getComputedStyle(ele. null); JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”) 这里的样式是取优先级最高的,不只是行间样式,所有的只要是表现出来的样式都可以获取出来。 同时,返回的计算样式的值都是绝对值,没有相对单位。 我们写的">这个方法有两个参数,第一个参数是我们要获取的元素。 第二个参数是一个字符串,代表我们是否要获取这个元素上面的某一个伪元素,如果不的话,就填写null,否则就填写要获取的这个元素的哪一个伪元素。 1 div:after{ 2 width: 100px; 3 height; 100px; 4 background-color: red; 5 } 6 window.getComputedStyle(div, ‘after’).width= 100px; 阅读全文
posted @ 2018-12-06 23:22 Panda-Q 阅读(207) 评论(0) 推荐(1) 编辑
摘要: 每一个dom元素都有一个属性style,dom.style里面存放的这个元素的行间样式,我们可以通过这个属性来读写元素的行间样式。 注意: 1.我们碰到float这样的关键字属性的时候,前面要加一个css前缀。 float—>cssFloat 2.复合属性必须拆解 border: 1px solid red; 这种属性是不允许出现的,只能写border-width、border-color、border-style。 3.当css中的样式是用“-”连接起来的时候,我们要变成小驼峰式写法。 background-color —> backgroundColor; 这个属性只能读写行间样式,我们写在css的样式是不能获取的,因此我们通过这个属性加样式的时候要 阅读全文
posted @ 2018-12-06 23:01 Panda-Q 阅读(337) 评论(0) 推荐(0) 编辑
摘要: 查看元素的几何尺寸 domEle.getBoundingClientRect() 在获取的dom元素上,有一个getBoundingClientRect方法,这个方法可以获取到元素的宽高和左上点的位置以及有下点的位置(width、height、top、left、right、bottom),注意这里的宽高是指除去了margin的盒子模型的宽高。 但是老版本的IE浏览器没有实现width和height,那么我们在老版本的IE计算宽高的时候就需要用bottom-top和right-left来计算宽高值了。 还有一点需要注意的是,这里的宽高也不是实时更新的,数据只是一个副本。 我们依然可以封装一个函数,可以返回元素的宽高。 阅读全文
posted @ 2018-11-28 18:32 Panda-Q 阅读(500) 评论(0) 推荐(0) 编辑
摘要: 视口就是我们的可视区,因为我们改变浏览器的大小的时候会改变可视区的大小,那么我们如何来查看当前浏览器的可视区大小? 这里我们依然有两套方法: 第一套是window.innerHeight/window.innerWidth; 这个方法可以直接获取到当前可视区的宽高,但是依然很遗憾的是IE8以及以下的版本不兼容。 这个时候就需要第二套方法了: 在标准模式下,doucment.documentElement.clientWidth/document.documentElement.clientHeight 在任何浏览器都兼容。 阅读全文
posted @ 2018-11-28 18:22 Panda-Q 阅读(248) 评论(0) 推荐(0) 编辑
摘要: js中有两套方法可以查看当前滚动条的滚动距离。 第一套是这样的: window.pageXOffset/window.pageYOffset 这个方法可以查看滚动条的横轴和纵轴的滚动距离,但是很遗憾的是IE8以及以下的版本不兼容。 因此针对于IE,我们就需要有第二套方法: document.body.scrollLeft/doucment.body.scrollTop document.documentElement.scrollLeft/document.documentElement.scrollTop 阅读全文
posted @ 2018-11-28 18:14 Panda-Q 阅读(976) 评论(0) 推荐(0) 编辑
摘要: 定时器是javascript的重点部分,在以后的很多实战项目里都会用到。 在javascript中,与定时器有关的方法是: setInterval、clearInterval 以及 setTimeout、clearTimeout 阅读全文
posted @ 2018-11-28 17:52 Panda-Q 阅读(8088) 评论(0) 推荐(0) 编辑
摘要: 日期对象也是javascript的内置对象之一,我们可以直接使用。 var date = new Date(); 在文档中我们也可以看到它的方法很多,但是常用的其实并没有那么多。 |Date()|返回当日的日期和时间。| |getDate()|从 Date 对象返回一个月中的某一天 (1 ~ 31)。| |getDay()|从 Date 对象返回一周中的某一天 (0 ~ 6)。| |getMonth()|从 Date 对象返回月份 (0 ~ 11)。| |getFullYear()|从 Date 对象以四位数字返回年份。| |getYear()|请使用 getFullYear() 方法代替。| |getHours()|返回 Date 对象的小时 (0 ~ 23)。| 阅读全文
posted @ 2018-11-28 17:46 Panda-Q 阅读(309) 评论(0) 推荐(0) 编辑
摘要: 一些重要的标签 • ol li 这是一组标签,它们二者都是成对出现的,每一个标签单独出现都是没有意义的事情。 这一组标签叫做有序列表,ol是外面的列表框,li是里面的子项,并且每一个li子项的前面都会带有序号。 阅读全文
posted @ 2018-11-28 00:34 Panda-Q 阅读(334) 评论(0) 推荐(0) 编辑
摘要: • html中的标签数量是很多的,据人统计大概有300个左右,并且每年都会以20-30个的速度增加着,但是这么多的标签我们不必都去记住,因为很多标签都是不常用的或者可以用基础的标签搭配组合,实际上我们需要掌握的大概在30个左右。 • 在前端开发中我们要知道,并不是你用的技术多么先进就显得多么厉害,我们要考虑到代码的可读性以及后期的可维护性,用常见的标签来写才会让其他人都能读懂你的代码。 阅读全文
posted @ 2018-11-28 00:19 Panda-Q 阅读(552) 评论(0) 推荐(1) 编辑