css:left,posLeft,pixelLeft

2016-02-19 17:47 34 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

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

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

程序代码

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

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

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

延伸阅读
标签: Web开发
Cascading Style Sheets: The Definitive Guide, 2nd Edition is a thorough review of all aspects of CSS2.1 and a comprehensive guide to CSS implementation. The book includes new content on positioning, lists and generated content, table layout, user interface, paged media, and more. It explores in detail each individ...
标签: Web开发
less官方网址:http://lesscss.org 下面就来介绍下吧 less用变量 (variables),引用(mixins),表达式(operations),嵌套规则(nested rules)来扩展css开发   变量 (variables) 重复使用的值可以定义成变量的形式,方便更改哈 例子如下: #header { color: #4D926F;}h2 { color: #4D926F;} @brand_color: #4D926F;#header ...
标签: Web开发
CSS组合 你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。 比如,你有如下的代码: h2 { color: red; } .22333 { color: red; } .22333com { color: red; } 则你可以这样写: h2,.22333,.22333com { color: red; } 使用组合,你可以一次定义多个CSS,为你节省很多字节和时间。 CSS嵌套 ...
标签: Web开发
nettuts带来的5个css书写技巧,简单翻译一下它的中心思想。 1. CSS Reset/重置 你也许需要先了解什么是css重置。然后怎么样写css重置呢。 你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下来应该根据你的项目改成你自己的reset.不要使用* { margin: 0; padding: 0; } 。我个人很爱用,
标签: Web开发
CSS Naked Day,也称CSS裸奔节或CSS裸奔日,2009年4月9日是第四界css裸奔节。Mb5u.com作为学习类的站点,未参加这次裸奔节! CSS裸奔节就是将这整站的css样式都去掉,这样所有的布局,颜色,背景什么的就都没有了(除非你使用table布局),只剩下html实体显示出来,起源好像是比较无聊的想法,就是剥去css的外衣,让大家看看你的(x)html...

经验教程

526

收藏

87

精华推荐

CSS入门教程——CSS简介

CSS入门教程——CSS简介

吟吟宝

CSS教程:详解CSS特定值

CSS教程:详解CSS特定值

北京房屋质押

CSS教程之CSS盒模型

CSS教程之CSS盒模型

万尽凋零

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