2018-09-07 原生js獲取left和top

[原生js獲取left值和top值]
---------------------------------(https://www.cnblogs.com/yizhilin/p/7269124.html)

在用js做動(dòng)態(tài)效果時(shí)滓鸠,通常需要獲取元素絕對(duì)定位中的left和top屬性值褐筛。比如做一個(gè)碰撞廣告,就要不停的獲取元素的top和left屬性值。

需要注意的事:取值的元素必須要設(shè)置position:absolute絕對(duì)定位屬性腹缩,才能取的到left值。

第一種方法呜师,比較簡(jiǎn)單框杜,就是直接通過(guò)obj.style.left和obj.style.top,但是有局限性踱蠢,這種獲取的方法只能獲取到行內(nèi)樣式的left和top的屬性值火欧,不能獲取到style標(biāo)簽和link 外部引用的left和top屬性值。

第二種方法 茎截,只讀苇侵,可以獲取所有style樣式,存在兼容性問(wèn)題企锌,在標(biāo)準(zhǔn)瀏覽器中可以通過(guò)window.getComputedStyle(對(duì)象榆浓,null).left方法來(lái)獲取元素的left和top的屬性值。而在IE瀏覽器上則是采用obj.currentStyle.left方法來(lái)獲取屬性值撕攒。

第三種方法陡鹃,使用obj.offsetLeft來(lái)獲取對(duì)象的left屬性值,用obj.offsetTop來(lái)獲取對(duì)象的top屬性值。

栗子:
<script type="text/javascript">
// 1抖坪,第一種方法 obj.style.left 只能獲取行內(nèi)樣式的left值
var boxs = document.getElementById('boxs');
var ctns = document.getElementById('ctns');
var a = boxs.style.left;
console.log(a); //值是空萍鲸,沒(méi)有

var a2 = ctns.style.left;
console.log(a2);    //值是20px


// 2,第二種方法擦俐,獲取所有類(lèi)型樣式值猿推,要寫(xiě)兼容
//支持w3c規(guī)范的瀏覽器
var b2= window.getComputedStyle(boxs).left;
console.log(b2);    //10px
//兼容IE9以下寫(xiě)法
var b3 = window.getComputedStyle? window.getComputedStyle(boxs).left : boxs.currentStyle.left;
console.log(b3);    //10px

// 3,第三種方法 使用obj.offsetLeft
var c = boxs.offsetLeft;
var c2 = ctns.offsetLeft;
console.log(c);     //值是10
console.log(c2);    //值是20

</script>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末捌肴,一起剝皮案震驚了整個(gè)濱河市蹬叭,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌状知,老刑警劉巖秽五,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異饥悴,居然都是意外死亡坦喘,警方通過(guò)查閱死者的電腦和手機(jī)盲再,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)瓣铣,“玉大人答朋,你說(shuō)我怎么就攤上這事√男Γ” “怎么了梦碗?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)蓖救。 經(jīng)常有香客問(wèn)我洪规,道長(zhǎng),這世上最難降的妖魔是什么循捺? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任斩例,我火速辦了婚禮,結(jié)果婚禮上从橘,老公的妹妹穿的比我還像新娘念赶。我一直安慰自己,他們只是感情好恰力,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布晶乔。 她就那樣靜靜地躺著,像睡著了一般牺勾。 火紅的嫁衣襯著肌膚如雪正罢。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,821評(píng)論 1 314
  • 那天驻民,我揣著相機(jī)與錄音翻具,去河邊找鬼。 笑死回还,一個(gè)胖子當(dāng)著我的面吹牛裆泳,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播柠硕,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼工禾,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了蝗柔?” 一聲冷哼從身側(cè)響起闻葵,我...
    開(kāi)封第一講書(shū)人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎癣丧,沒(méi)想到半個(gè)月后槽畔,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡胁编,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年厢钧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了鳞尔。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡早直,死狀恐怖寥假,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情霞扬,我是刑警寧澤糕韧,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站祥得,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏蒋得。R本人自食惡果不足惜级及,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望额衙。 院中可真熱鬧饮焦,春花似錦、人聲如沸窍侧。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)伟件。三九已至硼啤,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間斧账,已是汗流浹背谴返。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留咧织,地道東北人嗓袱。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像习绢,于是被迫代替她去往敵國(guó)和親渠抹。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5闪萄? 答:HTML5是最新的HTML標(biāo)準(zhǔn)梧却。 注意:講述HT...
    kismetajun閱讀 27,528評(píng)論 1 45
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁(yè)的形式展示給用戶(hù)的,因此網(wǎng)頁(yè)是網(wǎng)絡(luò)信息傳遞的載體败去。網(wǎng)頁(yè)文件是用...
    阿啊阿吖丁閱讀 3,910評(píng)論 0 0
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,223評(píng)論 0 3
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案篮幢? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,762評(píng)論 1 92
  • 今天天氣挺好的,不冷不熱整個(gè)人也是清凈为迈,在這有著忽冷忽熱極端天氣的城市這樣的天氣顯得有點(diǎn)突兀 我真的是個(gè)喜歡胡思亂...
    覃貴貴閱讀 325評(píng)論 0 0