left、pixelLeft、posLeft的区别

yexj00.style.pixelLeft=50
yexj00.style.left=50
pxyexj00.style.posLeft=50
he.style.pixelLeft=39
he.style.left=10.2mm
he.style.posLeft=10.199999809265136
d.style.pixelLeft=0
d.style.left=
d.style.posLeft=0

http://www.jinyuanbao.cn

left 是字符串，是取html中left的值，如果没有就是空串。
pixelLeft 是数值，是将left的值(如果是空串则赋为0)转化为像素值。
posLeft 就是将left的值转化为数值类型，而且是浮点型。

下面代码直接复制到文件浏览测试：
<div id=yexj00 style="position:absolute; left:50px; top:280px; width:300px; height: 150px; background:#d3d6d9">yexj00
<div id=he style="position:relative; left:10.2mm; width:50px; background:red">he</div>
</div>
<div id=d style="position:absolute;width:20px;height:50px;background:lightgreen">d</div>
<input type=button value=测试 οnclick=func(a)>
<textarea cols=80 rows=15 id=a></textarea>
<script>
function func(obj){
s="";
s+="yexj00.style.pixelLeft=<font color=red>"+yexj00.style.pixelLeft+"</font><br>";
s+="yexj00.style.left=<font color=red>"+yexj00.style.left+"</font><br>";
s+="yexj00.style.posLeft=<font color=red>"+yexj00.style.posLeft+"</font><br>";
s+="he.style.pixelLeft=<font color=red>"+he.style.pixelLeft+"</font><br>";
s+="he.style.left=<font color=red>"+he.style.left+"</font><br>";
s+="he.style.posLeft=<font color=red>"+he.style.posLeft+"</font><br>";
s+="d.style.pixelLeft=<font color=red>"+d.style.pixelLeft+"</font><br>";
s+="d.style.left=<font color=red>"+d.style.left+"</font><br>";
s+="d.style.posLeft=<font color=red>"+d.style.posLeft+"</font>";
s+="<hr>仔细体会一下本例。<br><font color=navy>left</font> 是字符串，是取html中left的值，如果没有就是空串。<br><font color=navy>pixelLeft</font> 是数值，是将left的值(如果是空串则赋为0)转化为像素值。<br><font color=navy>posLeft</font> 就是将left的值转化为数值类型，而且是浮点型。";
var h=document.createElement("SPAN");
h.innerHTML=s;
obj.appendChild(h);
}
</script>

转载于:https://www.cnblogs.com/jyb2014/p/3949615.html