js 獲取和設置css3 屬性值的實現方法

Harpsichord1207 發布于2019-08-29 12:17 / 756人閱讀

摘要：眾多周知增加了很多屬性，在讀寫的時候就沒有原先那么方便了。如只考慮行間樣式的話，只需就可獲取，設置的時候也只需要即可。設置的時候很簡單遵循駝峰式的寫法即可。獲取的時候的值為字符串如何獲取想要的值呢搜索半天沒有找到簡單辦法。

眾多周知 CSS3 增加了很多屬性，在讀寫的時候就沒有原先那么方便了。

如:

只考慮行間樣式的話，只需 div.style.left 就可獲取，設置的時候也只需要 div.style.left="100px" 即可。很簡單。

但是css3來了

如:

怎么搞？被嚇住了。。。

設置的時候很簡單：div.style.webkitTransform="translate(20px,-20px)" 遵循駝峰式的寫法即可。

獲取的時候：
div.style. webkitTransform 的值為字符串 ‘translate(20px,-20px) "
如何獲取想要的X、Y值呢？搜索半天沒有找到簡單辦法。只能字符串截取，或者正則匹配來獲得了。

寫一個正則表達式獲取想要的 20和-20

reg=/-?[0-9]+/g 匹配負號和數字
reg2=/-?[0-9]+.?[0-9]*/g 可能包含小數點的

然后來match搜索一下
div.webkitTransform.match(reg) //結果 [20,-20]

就會返回一個包含X值和Y值的數組了。

同理：

-webkit-transform: skew(20deg,-50deg);/ skew(相對x軸傾斜,相對y軸傾斜)/
-webkit-transform: matrix(1,0.4,0,1,0,0);

各種等等。。。

云服務器 GPU云服務器 js獲取值的長度 js獲取屬性 js 獲取ext屬性 js 獲取第一個屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111791.html

js 獲取和設置css3 屬性值的實現方法

摘要：眾多周知增加了很多屬性，在讀寫的時候就沒有原先那么方便了。如只考慮行間樣式的話，只需就可獲取，設置的時候也只需要即可。設置的時候很簡單遵循駝峰式的寫法即可。獲取的時候的值為字符串如何獲取想要的值呢搜索半天沒有找到簡單辦法。眾多周知 CSS3 增加了很多屬性，在讀寫的時候就沒有原先那么方便了。如: 只考慮行間樣式的話，只需 div.style.left 就可獲取，設置的時候也只需要 ...

lovXin 2019-08-20 15:18 評論0 收藏0
前端-CSS3&H5

摘要：高度模型淺識為的簡寫，簡稱為塊級格式化上下文，為瀏覽器渲染某一區域的機制，中只有和中還增加了和。并非所有的布局都會在開發中使用，但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不...

xiaolinbang 2019-08-29 14:14 評論0 收藏0
使用Move.js創建CSS3動畫

摘要：是使用簡單函數創建動畫的一個簡單的庫。基礎知識提供了創建動畫的最簡單的。他用于分割動畫為兩個集合，并按順序執行。如下動畫被分為兩步，通過方法實現分割使用創建復雜動畫在本教程中，我們已經寫了很多基本的動畫來了解各個方法。原文鏈接，請移步creating-css-animations-using-move-js 第一次翻譯，如有誤解，請移步原文在網站上，CSS3 的過渡和動畫是當前...

MASAILA 2019-08-21 12:13 評論0 收藏0