css:left,posLeft,pixelLeft

2016-02-19 17:47 31 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐css:left,posLeft,pixelLeft,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - Web开发 】

SCRIPT LANGUAGE="JavaScript" src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js"/SCRIPT
SCRIPT LANGUAGE="JavaScript"
!–
$(function(){
alert(   $("#re").css("left")  +  "  "  +   $("#re").get(0).style.posLeft +"  "+  $("#re").get(0).style.pixelLeft )
})
//–
/SCRIPT
div id="re" style="  position : absolute ; left:200px;"aaaaaaa/div

=========================
对比下:
$("#re").css("left")    :  返回200px,
$("#re").get(0).style.posLeft  :返回200,
$("#re").get(0).style.pixelLeft   :返回200,
所以后面2个适合于 计算, 因为没有单位  ,很适合计算.
那么posLeft  和pixelLeft   又有什么区别呢?
概念东西不说了  举个例子吧,
比如我把div的left改成 left:200em;

程序代码

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

div id="re" style="  position : absolute ; left:200em;"aaaaaaa/div

这时候
left: 200em;
posLeft  返回: 200 ;
pixelLeft   返回 : 4267 ;
所以
left 是字符串,是取html中left的值.
posLeft 就是将left的值转化为数值类型,而且是浮点型 . (不带单位)
pixelLeft 是数值,是将left的值(如果是空串则赋为0)转化为像素值.. (不带单位)。
由于上面属性只支持 ie.(所以不建议使用)
建议使用
$("#re").get(0).offsetLeft
这个属性通用.
jquery1.2以后支持:
$("p").offset().left  
SCRIPT LANGUAGE="JavaScript"
!–
    $(function(){
var p = $("p");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
    })
//–
/SCRIPT
br/br/br/br/
paaa/p

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

来源:https://www.tulaoshi.com/n/20160219/1616050.html

延伸阅读
标签: Web开发
上一篇 CSS教程 文章:CSS高级技巧:圆角矩形 CSS Sprites, 利用CSS background-position 进行背景绝对定位, 减少HTTP请求, 加速网页显示, 解决图片载入闪动问题的技巧. CSS Sprites最适合用来做的, 恩, 比如: 清单导航的CSS鼠标翻转效果 大量小图标集中的应用 (FckEditor) ...很多很多,多的想不出来了. 实现原理简单地说就是控制容器的大...
标签: Web开发
什么是CSS? CSS是CascadingStyleSheets(层叠样式表)的缩写。它的作用是定义网页的外观(例如字体,颜色等等),它也可以和javascript等浏览器端脚本语言合作做出许多动态的效果。   谁需要学习CSS? 对于想要使用XHTML制作符合W3C国际Web标准网站的站长,CSS是必须学习的,它几乎是你定义网页外观的唯一工具;而对于那些毫不关心Web标...
标签: Web开发
以前我从来没有具体的谈到这个问题      最好的解释方法是用一个例子来说明那的特性引起了你的困惑或则没有按照预期的显示。然后我们将近距离的细看计算实际的值来选择最优的选择器。      这是一个简单的例子 无序的列表: <ul id="summer-drinks"> <li>Whiskey and Ginger Ale/li</li...
标签: Web开发
CSS 盒模型 网页设计中的每个元素都是长方形的盒子。 盒子的尺寸是怎样精确计算的,请看下图: 如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿),就会很熟悉下面的图表了。 这个图表很好地展示了作用于页面上任意盒子的数值。 注意以上两个例子中,margin 都是白色的。Margin 比较特别,它不会影...
标签: Web开发
前面一篇介绍了网页制作的CSS的作用 宣告CSS样式的语法如下: 選擇器{ 选择器{ 屬性:設定值; 属性:设定值; ... } 在一個選擇器(Selector) 中,可以設定的屬性數目沒有限制。在一个选择器(Selector)中,可以设定的属性数目没有限制。 選擇器主要有三種:型類(Type) 選擇器、Class 選擇器、和ID 選擇器。选择器主要有三种:型类...

经验教程

253

收藏

51

精华推荐

CSS技巧:段正淳的css笔记

CSS技巧:段正淳的css笔记

老绵羊20130801

CSS实例教程:CSS Hack

CSS实例教程:CSS Hack

快乐时尚的我

什么是CSS(CSS快速入门)

什么是CSS(CSS快速入门)

抚摸洒下

微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部