zoukankan      html  css  js  c++  java
  • JS DOM元素

    // 为element增加一个样式名为newClassName的新样式

    function addClass(element, newClassName) {
        var value = element.className;
            element.className = value + " " + newClassName;
    }
    var box = document.getElementById("box");
    addClass(box,'js')

    // 移除element中的样式oldClassName

    function removeClass(element, oldClassName) {
       var value = element.className;
       var str = value.replace(oldClassName,"");
       element.className = str;
    }
    var box = document.getElementById("box");
    console.log(removeClass(box,"active"));

    // 判断siblingNode和element是否为同一个父元素下的同一级的元素,返回bool值

    function isSiblingNode(element, siblingNode) {
        return element.parentNode===siblingNode.parentNode;
    }
    
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    
    console.log(isSiblingNode(box1,box2))

    // 获取element相对于浏览器窗口的位置,返回一个对象{x, y}

    function getPosition(element) {
        return {
            x:element.offsetLeft,
            y:element.offsetTop
        };
    }
    var box1 = document.getElementById("box1");
    console.log(getPosition(box1));
  • 相关阅读:
    跟我学Angular2(1-初体验)
    JavaScript之糟粕
    JavaScript之毒瘤
    CSS布局(下)
    CSS布局(上)
    ES6入门系列三(特性总览下)
    ES6入门系列四(测试题分析)
    setTimout执行时间
    进程和线程关系及区别
    css3新单位学习
  • 原文地址:https://www.cnblogs.com/pssp/p/5277239.html
Copyright © 2011-2022 走看看