码迷,mamicode.com
首页 > 编程语言 > 详细

用javascript为页面添加样式

时间:2015-05-14 13:58:03      阅读:717      评论:0      收藏:0      [点我收藏+]

标签:

 

// 为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 来获取的。

用javascript为页面添加样式

标签:

原文地址:http://www.cnblogs.com/bianxirui/p/4503044.html

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!