2021-06-20 day10

最新推荐文章于 2021-07-21 11:29:51 发布

孟陬拾陆

最新推荐文章于 2021-07-21 11:29:51 发布

阅读量68

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_59023663/article/details/118161239

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.页面滚出去的高

页面只要滚动了就会触发

  window.onscroll = function(){
	var oTop = document.body.scrollTop ||document.documentElement.scrollTop;
    console.log(oTop);
  }

2.自定义属性和固有属性

固有属性
input 有value type … 设置固有属性元素.属性名 = 属性值
自定义属性
设置自定义属性 (自己定义的属性 a ，b，class，)
语法: 元素.setAttribute(‘属性名’,‘属性值’)

获取
语法: 元素.getAttribute(‘属性名’)
删除
语法: 元素.removeAttribute(‘属性名’)

3.节点类型

nodeType节点类型：获取的是一个数字
元素节点:1
属性节点:2
文本节点:3
注释节点:8
文档节点:9

parentNode 父节点。
children 当前节点的所有子节点(只有元素节点)，即所有的元素-类型的子节点
firstElementChild 当前节点的第一个元素类型的子节点。
lastElementChild 当前节点的最后一个元素类型的子节点。
previousElementSibling 访问前一个同胞元素类型的节点。
nextElementSibling 访问后一个同胞元素类型的节点。

document.createElement(HTML标签名) //创建一个元素节点
document.createTextNode(文字) //创建一个文本节点
父节点.appendChild(newChild) //newChild 被添加到孩子列表中的末端。

父节点.insertBefore(newChild, referenceNode)
// 将 newChild 节点插入到 referenceNode 之前。

父节点.removeChild(oldChild) 
//删除 oldChild子节点。

节点本身.remove();
//删除本身
父节点.replaceChild(newChild, oldChild)
//用newChild节点替换oldChild节点

ulDom.replaceChild( liDom , ulDom.children[1] );

4.获取非内间样式

如何获取非行间样式？js提供了一个方法：

window.getComputedStyle(oDiv,null)['width'] ;// 获取div的非行间样式
console.log(window.getComputedStyle(oDiv,null)['width']); // IE低版本不支持

// 那IE的写法：
元素.currentStyle['width']

兼容写法

非IE   window.getComputedStyle(元素,null)['width']
IE     元素.currentStyle['width']
---------------------------------------------------------------------
   function getStyle(obj,attr){
      if (obj.currentStyle) {
          return obj.currentStyle[attr]
      }else{
          return getComputedStyle(obj,null)[attr]
      }
   }

5.选项卡

<style>
        div {
            width: 300px;
            height: 80px;
            background-color: pink;
            display: none;
        }
    </style>
<body>
    <input type="button" value="教育">
    <input type="button" value="娱乐">
    <input type="button" value="新闻">
    <div style="display: block;">教育内容</div>
    <div>娱乐内容</div>
    <div>新闻内容</div>
</body>```

```javascript
<script>
    var oIpts = document.querySelectorAll('input')
    var oDivs = document.querySelectorAll('div')
    // 因为要给button按钮添加点击事件，所以需要循环遍历button，给每一个添加点击事件
    for (var i = 0; i < oIpts.length; i++) {
        // 把i变量存储到index属性中   
        oIpts[i].index = i;
        oIpts[i].onclick = function () {
            //   this.index 指代的就是你点击的元素
            for(var j = 0;j<oIpts.length;j++){
                oIpts[j].style.background = ''
                oDivs[j].style.display = 'none'
            }
            // 当前点击的元素变色
             this.style.background = 'orange';
            //  当前点击元素下标对应的div  this.index
            // this.index: 0 1 2
            oDivs[this.index].style.display = 'block'
        }
    }

点击那个按钮下面就显示相应的内容

孟陬拾陆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-20 day10

1.页面滚出去的高页面只要滚动了就会触发 window.onscroll = function(){ var oTop = document.body.scrollTop ||document.documentElement.scrollTop; console.log(oTop); }2.自定义属性和固有属性固有属性input 有value type … 设置固有属性元素.属性名 = 属性值自定义属性设置自定义属性 (自己定义的属性 a ，b，clas
复制链接

扫一扫