2019年05月_gxgalaxy

原创 JS之脚本化CSS

1、读写元素css属性 dom.style.prop //只有这个可以写入可以读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面应该加css。eg：float->cssFloat 复合属性必须拆解，组合单词变成小驼峰式写法 background-color ->backgroundColor 写入的值必须是字符串格式 2、查询计算样式 window....

2019-05-23 09:16:17 136

原创 JS之获取窗口属性

查看页面滚动条的滚动距离 1、window.pageXOffset/pageYOffset(IE8及以下不兼容) 2、IE8及以下的浏览器 document.body.scrollLeft/Top document.documentElement.scrollLeft/Top 这两个互相冲突，一个有值，另一个一定为0 document.body.scroll...

2019-05-23 08:34:04 620

原创 JS之事件

如何绑定事件 1、.onclick = function(){}；兼容性很好，但是一个元素的同一事件上只能绑定一个处理，基本等同于写在HTML行间上 var div = document.getElementsByTagName('div')[0]; div.onclick = function(){ console.log(this); } 2、obj.addEventList...

2019-05-23 08:22:48 199

原创 JS之事件处理模型——事件冒泡、事件捕获

1、事件冒泡结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上） <div class="wrapper"> <div class="content"> <div class="box"> </div> </div&...

2019-05-23 00:32:21 310

原创原生JS事件绑定练习题

1、 <ul> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> 使用原生JS ，addEventListener，给每个li绑定一个click事件，输出他们的顺序 <ul> ...

2019-05-22 20:04:29 443

原创 DOM基本操作之习题二

1、封装兼容性方法，求滚动条滚动离getScrollOffset() <script type="text/javascript"> function getScrollOffset(){ if(window.pageXOffset){ return{ x : window.pageXOffset, y : window.pageYOffset ...

2019-05-22 00:23:37 264

原创 JS之Date对象，写一个计时器

写一个计时器，到三分钟停止 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="./src/demo.css"> &l...

2019-05-19 16:19:52 416

原创 JavaScript之DOM的基本操作

查 document 代表整个文档 document.getElementById() 通过id标识选择这个元素，一个id对应一个元素 .getElementsByTagName() 通过标签名来选中 .getElementsByName() 只有部分标签name可生效（表单，表单元素，img，iframe） .getElementsByClassNam...

2019-05-18 23:55:41 137

原创 DOM之习题练习

1、封装函数，返回元素e的第n层祖先元素节点重点代码： <div> <strong> <span> <i></i> </span> </strong> </div> <script type="text/javascript"> function retPar...

2019-05-18 17:04:03 1645

原创 JavaScript之DOM操作实现一个鼠标滑动颜色变化实例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="./src/demo.css"> <style> *{...

2019-05-16 21:48:09 640

原创 Javascript之DOM实现选项卡功能

定义： DOM定义了表示和修改文档所需的方法，DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和Xml功能的一类对象的集合，也有人称DOM是对HTML以及XML的标准编程接口。下面我们实现一个简单的选项卡功能： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...

2019-05-16 00:02:13 643

gxgalaxy