用javascript为页面添加样式

 

// 为element增加一个样式名为newClassName的新样式
function addClass(element, newClassName) {
    // your implement
    var oldClassName=element.className;
    element.className=oldClassName===""?newClassName:oldClassName+" "+newClassName;
}

// 移除element中的样式oldClassName
function removeClass(element, oldClassName) {
    // your implement
    var ori=element.className;
    var t=regExp("\\b"+oldClassName+"\\b")
    if(element.oldClassName){
        element.className=ori.replace(t,"");
    }
}

// 判断siblingNode和element是否为同一个父元素下的同一级的元素，返回bool值
function isSiblingNode(element, siblingNode) {
    // your implement
    return siblingNode.parentNode===element.parentNode;
}

// 获取element相对于浏览器窗口的位置，返回一个对象{x, y}
function getPosition(element) {
    // your implement
    var result={};
    var x=Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
    var y=Math.max(document.documentElement.scrollTop,document.body.scrollTop);
    var result.x=element.getBoundingClientRect().left+x;
    var result.y=element.getBoundingClientRect().top+y;
    return result;
}

 

欲获取元素位置，可使用 getBoundingClientRect() 方法获取当前元素相对于可视区域的位置，再加上滚动条的位置。Firefox、Opera 和 IE 浏览器认为在客户端浏览器展示的页面的内容对应于整个 HTML，所以使用 document.documentElement来代表，相应的滚动距离则通过document.documentElement.scrollLeft 和 document.documentElement.scrollTop 来获取，而 Safari 和 Chrome 浏览器则认为页面开始于 body 部分，从而相应的滚动距离用 document.body.scrollLeft 和document.body.scrollTop 来获取。另外需要注意的是，Firefox 和 IE 的 quirks mode（兼容模式）下是用document.body 来获取的。

转载于:https://www.cnblogs.com/bianxirui/p/4503044.html