页面内某元素到文档顶部的距离计算

之前写了一篇元素到网页顶部距离计算方法,其实分明有更好的方法,例如这个方法就不需要写那么复杂的循环了,这里再次总结一下。

2015年1月7日

之前写了一篇元素到网页顶部距离计算方法,其实分明有更好的方法,例如这个方法就不需要写那么复杂的循环了,这里再次总结一下。

请看下面代码,或者查看在线demo调试,看起来兼容性都是OK的。大家可以自己试试。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>the distance to top</title>
    <style type="text/css">
    div {margin:10px 20px;padding:5px;border:3px solid #aaa;position:relative;}
    .para {background-color:#ccc;}
    </style>
</head>
<body>
<div class="outer">
    <div class="outerWrap">
        <div class="header"></div>
        <div class="content">
            <div class="content-inner">
                <p class="para" id="para">
                    Hello, whidy! 这是一个获取当前元素距离网页顶部高度的计算demo.
                </p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
para = document.getElementById('para');
var y = para.offsetTop;
var y2 = para.getBoundingClientRect().top;
while (para = para.offsetParent) {
    var oStyle = para.currentStyle? para.currentStyle : window.getComputedStyle(para, null); //currentStyle兼容IE
    var borderTopWidth = parseInt(oStyle.getPropertyValue('border-top-width')); //border-top-width实际上用于被包父级层的边框值计算,因此本demo内header的边框值对此处不影响,取而代之的是直接计入content盒子距离outerWrap的高度
    if(borderTopWidth) { //如果有边框值则加上边框
        y += para.offsetTop + borderTopWidth;
    }
    console.log(y,'offsetTop');
    console.log(y2,'getBoundingClientRect');
}
</script>
</body>
</html>

参考资料: Element.getBoundingClientRect() – Web API 接口 | MDN

魅族手机MX2原生浏览器字体大小问题

今天要说的是我才发现的一个BUG.关于魅族手机MX2,MX3(其他机型未测试),固件版本均为3.7.3A稳定版原生浏览器,在测试页面的字体大小样式时无效,

都知道魅族的手机很坑了,我就不多说了.

今天要说的是我才发现的一个BUG.关于魅族手机MX2,MX3(其他机型未测试),固件版本均为3.7.3A稳定版原生浏览器,在测试页面的字体大小样式时无效,如果你的魅族手机有遇到类似问题,可以试试这个demo测试一下,顺便看下源码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meizu mx2 stock browser bug with font size style</title>
<style type="text/css">
* {margin:0;padding:0;}
body * {/*height:150px;*/display: block;}
</style>
</head>
<body>
    <h1 style="font-size:60px;">h1 tag with a font-size 60px style!</h1>
    <p style="font-size:60px;">p tag with a font-size 60px style!</p>
    <span style="font-size:60px;">span tag with a font-size 60px style!</span>
    <strong style="font-size:60px;">strong tag with a font-size 60px style!</strong>
    <a href="#" style="font-size:60px;">a tag with a font-size 60px style!</a>
</body>
</html>

从这个代码中可以看出,所有元素应该都是60px字体大小.

但是又可以发现a标签的字体大小是比以上字体大,实际上a才是60px大小,而其他元素的字体大小则是一个默认值.为什么会这样,请问魅族开发人员!

我发现了一个现象,上面把高度给注释去掉了,也就是”hack”后,则字体大小显示正常,均保持了60px,见demo2…这是什么原因.

鬼才知道!

因此我们一致认为魅族原生浏览器坑爹.我不记得web标准是需要给设定了字体大小的元素加高度的吧…

元素到网页顶部距离计算方法

前阵子做一个项目,做到了一个效果,关于一个导航条跟随屏幕滚动保持在页面顶端的效果,其中有一部分js需要计算导航条距离网页顶部值,当时想不出好的解决方案,根据特定的页面结构写了个不是很好的方法,然而不能适应各种情况,因此今天就研究了一下.

前阵子做一个项目,做到了一个效果,关于一个导航条跟随屏幕滚动保持在页面顶端的效果,其中有一部分js需要计算导航条距离网页顶部值,当时想不出好的解决方案,根据特定的页面结构写了个不是很好的方法,然而不能适应各种情况,因此今天就研究了一下.

先来看看这个来着作者lisatisfy的方法:

function getAbsPoint(e) {
    //再封装个函数吧。传进来的e可以是字符串类型(即id),也可以是htmlElement对象。觉得getEL是个累赘的话,就把它删除掉。
    e = getEL(e);
    var x = e.offsetLeft;
    var y = e.offsetTop;
    while (e = e.offsetParent) {
    x += e.offsetLeft;
    y += e.offsetTop;
    }
    return {
    "x": x,
    "y": y
    };
}
//使用getEL,不用$,避免冲突。
function getEL(id) {
    if (typeif == "undefined") {
    return null;
    }
    if (typeof id == "string") {
    return document.getElementById(id);
    }
    return id;
}

这个的确不错,但是有一些缺陷.我也给作者留言了.并指出了可能出现的问题(当父级多个为相对定位时计算会出现问题,,,以及元素本身的边框值无法计算进去).不过思路是很好的,通过计算与父级层的距离不断计算叠加高度获取最终值.我的表达可能不够清晰,建议自己用这个js写个demo测试.

继续阅读“元素到网页顶部距离计算方法”

通过CSS3制作页面折角箭头的方法总结

最近在做wap方面工作,对html5和css3的相关知识又学习了些许,近期对于这种箭头” > “的CSS3制作方法进行了简单的总结,如果以后有想到其他更好的,也会不间断更新.闲话少说,直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 arrow test demo by whidy</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style type="text/css">
body {font-family:"Microsoft YaHei";}
h3 {line-height:2;border-bottom:1px dashed #aaa;}
.updated-time {font-size:14px;color:#999;}
i {font-style:normal;}
div {position:relative;}
div p {padding-top:50px;}
.arrow-1::after {-webkit-transform:rotate(45deg);border-color:#666;border-width:1px 1px 0 0;height:8px;left:0px;top:0px;width:8px;border-image:none;border-style:solid;content:" ";position:absolute;}
.arrow-2 {display:inline-block;position:relative;vertical-align:top;}
.arrow-2::before,.arrow-2::after {content:"";font-size:0;width:0;height:0;line-height:0;overflow:hidden;display:inline-block;position:absolute;top:0;border:0 dashed transparent;border-left-style:solid;border-width:7px;}
.arrow-2::before {border-left-color:#666;left:0;}
.arrow-2::after {border-left-color:#fff;left:-2px;}
.arrow-3 {-webkit-transform:rotate(45deg);width:12px;height:12px;-webkit-box-shadow:2px -2px 0px -1px #000;background-color:#fff;display:block;}
.arrow-4 {font-family:-webkit-pictograph;transform:scale(1,2);display:block;}
.arrow-5 {-webkit-transform:rotate(-90deg) scale(1,0.5);font-family:cursive;font-size:24px;display:inline-block;}
</style>
</head>
<body>
<h3>这是一个通过CSS3各种方式来测试箭头的DEMO</h3>
<div>
    <i class="arrow-1"></i>
    <p>通过写上边框和右边框形成的角度进行旋转,代码简单</p>
</div>

<div>
    <i class="arrow-2"></i>
    <p>通过两个三角形叠加形成一个箭头,代码较多,需考虑背景色</p>
</div>

<div>
    <i class="arrow-3"></i>
    <p>通过旋转一个白色正方形,并给他阴影产生的效果(似乎android 2.x不支持模糊距离为0的情况.所以虽然效果也不错,不过依情况适用)</p>
</div>

<div>
    <i class="arrow-4"> > </i>
    <p>通过字体设置为<em>-webkit-pictograph</em>并进行缩放产生的效果,兼容性较差</p>
</div>

<div>
    <i class="arrow-5">V</i>
    <p><del>这个实际上也是通过字体(cursive)控制,字母V通过旋转和变形,我觉得可能不好用,适合卡通版箭头吧...</del>(有的移动端没这个字体或浏览器支持不好,PC端兼容性较差 2014年10月22日)</p>
</div>

<p class="notes">参考网站:<strong>http://www.w3cplus.com/content/css3-transform</strong></p>
<p class="updated-time">更新日期:2014年10月31日</p>
</body>
</html>

上面也对各种制作方法进行了简单说明,大家也可以打开查看DEMO页面

CSS的通配符*内不能用display属性?

本来是想简单的reset一下,并且做测试,希望所有元素都为块级元素,于是给*加了个display:block属性值结果发现居然就无法正常解析style了…想去搜一下是怎么回事呢,却找不到,本想多测试几个属性,试试这个通配符是否还有其他属性无法使用,结果也没试出来,就此抛下疑问?难道不能这样写

<!DOCTYPE html>
<html>
<head>
<title>css * cannot use display property</title>
</head>
<style type="text/css">
* {display: block;border: 1px solid #f00;padding: 10px;margin-bottom: 10px;}
body {background-color: #fc0;}
</style>
<body>
<p>body with background color but styles come out too! we dont want this happen!</p>
<span>you can also try it yourself :)</span>
<img src="#" width="300" height="300" />
<a href="#">all blocks now?!</a>
</body>
</html>

而,假设这样的话,不同浏览器效果更是离谱,这里以IE6,7,8,CHROME,IE11为例.测试结果如图:

通配符有了display属性的结果
通配符有了display属性的结果

暂不提这个IE6连HTML节点也算进去了(注意滚动条边框),就说这个不同浏览器的效果,也值得研究下了.