成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js 對于樣式的操作

KoreyLee / 518人閱讀

摘要：原生中提供了不少對于樣式的操作，很多時(shí)候一直容易弄混亂，索性總結(jié)下一行間樣式的操作獲取的是行間的樣式，可讀可寫二計(jì)算后樣式操作只讀屬性，獲取所有瀏覽器渲染后的樣式兼容使用兼容獲取相對于可視區(qū)的以及盒子的寬和高盒子寬高盒子寬高

原生js中提供了不少對于樣式的操作，很多時(shí)候一直容易弄混亂，索性總結(jié)下

一：行間樣式的操作

Element.style
獲取的是行間的樣式，可讀可寫

二：計(jì)算后樣式操作
1.getComputedStyle()

只讀屬性，獲取所有瀏覽器渲染后的樣式

 let style = window.getComputedStyle(element, [pseudoElt]);
 getComputedStyle(div).marginRight

兼容：IE9- 使用 currentStyle兼容

2.getBoundingClientRect()

獲取相對于可視區(qū)的top leift bottom right 以及盒子的寬和高

3.clientWidth /clientHeight

盒子寬高+padding

4.offsetWidth/offsetHeigth

盒子寬高+padding+boder

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84721.html

相關(guān)文章

  • 根據(jù)瀏覽器渲染界面原理理解渲染阻塞、瀏覽器的重繪（repaints）與回流（reflows）

    摘要：渲染阻塞在瀏覽器進(jìn)行加載時(shí)，其實(shí)是并行加載所有資源。則就叫稱為重繪。在回流的時(shí)候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。 前面有講到當(dāng)用戶在瀏覽器輸入url之后，經(jīng)過一系列的過程，會最終向服務(wù)器請求到文檔數(shù)據(jù)，文檔數(shù)據(jù)請求到之后，瀏覽器會將這些數(shù)據(jù)傳給瀏覽器渲染引擎，渲染引擎開始正式工作了。 構(gòu)建...

    phodal 評論0 收藏0

  • 根據(jù)瀏覽器渲染界面原理理解渲染阻塞、瀏覽器的重繪（repaints）與回流（reflows）

    摘要：渲染阻塞在瀏覽器進(jìn)行加載時(shí)，其實(shí)是并行加載所有資源。則就叫稱為重繪。在回流的時(shí)候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。 前面有講到當(dāng)用戶在瀏覽器輸入url之后，經(jīng)過一系列的過程，會最終向服務(wù)器請求到文檔數(shù)據(jù)，文檔數(shù)據(jù)請求到之后，瀏覽器會將這些數(shù)據(jù)傳給瀏覽器渲染引擎，渲染引擎開始正式工作了。 構(gòu)建...

    daryl 評論0 收藏0

  • 根據(jù)瀏覽器渲染界面原理理解渲染阻塞、瀏覽器的重繪（repaints）與回流（reflows）

    摘要：渲染阻塞在瀏覽器進(jìn)行加載時(shí)，其實(shí)是并行加載所有資源。則就叫稱為重繪。在回流的時(shí)候，瀏覽器會使渲染樹中受到影響的部分失效，并重新構(gòu)造這部分渲染樹，完成回流后，瀏覽器會重新繪制受影響的部分到屏幕中，該過程成為重繪。 前面有講到當(dāng)用戶在瀏覽器輸入url之后，經(jīng)過一系列的過程，會最終向服務(wù)器請求到文檔數(shù)據(jù)，文檔數(shù)據(jù)請求到之后，瀏覽器會將這些數(shù)據(jù)傳給瀏覽器渲染引擎，渲染引擎開始正式工作了。 構(gòu)建...

    ranwu 評論0 收藏0

  • 前端每周清單半年盤點(diǎn)之 CSS 篇

    摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。它能夠?yàn)槲覀兲峁╊愃朴陬A(yù)處理器命名空間等多方面的輔助。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開發(fā)教程、工程實(shí)踐、深度閱讀、開源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID：f...

    RaoMeng 評論0 收藏0

  • 使用purifycss精簡css

    摘要：解決在精簡的時(shí)候，需要把里面的相對路徑替換成絕對路徑將中的引用的相對路徑轉(zhuǎn)化為絕對路徑精簡后，破壞了通用模塊的緩存這其實(shí)是一個(gè)取舍問題。解決不精簡通用模塊，只精簡具體業(yè)務(wù)相關(guān)的。 隨著項(xiàng)目的不斷迭代，我們的css會不斷變大，但通常頁面上需要用到的樣式并沒有那么多，很多樣式是無用的，而如果靠人工去剔除，吃力又容易出錯(cuò)。 有痛點(diǎn)就應(yīng)該去想辦法解決。那么有沒有辦法通過自動化來把這些無用的樣式...

    ethernet 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<