JS DOM元素 - pssp－IT工程師數位筆記本

文章出處

// 為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));