如何使用JavaScript動態(tài)設(shè)置CSS3屬性值

發(fā)布時間：2021-10-15 14:15:19 來源：億速云閱讀：158 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)如何使用JavaScript動態(tài)設(shè)置CSS3屬性值，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

使用JavaScript動態(tài)設(shè)置CSS3屬性值使我們能夠更精細(xì)地控制CSS過渡。在使用JavaScript設(shè)置CSS3屬性的教程中，以下是通用的CSS3屬性setter和getter。它實時檢查瀏覽器支持的JavaScript形式的CSS屬性版本（即：“ transform”或“ WebkitTransform”），并返回該屬性。

function getcss3prop（cssprop）{

var css3vendors = [''，' - moz - '，' - webkit - '，' - o - '，' - ms - '，' - khtml-']

var root = document.documentElement

function camelCase（str）{

return str.replace（/ \ - （[az]）/ gi，function（match，p1）{// p1引用括號中的子匹配

return p1.toUpperCase（）//將“ - ”后的第一個字母轉(zhuǎn)換為大寫

}）

}

for（var i = 0; i <css3vendors.length; i ++）{

var css3propcamel = camelCase（css3vendors [i] + cssprop）

if（css3propcamel.substr（0,2）=='Ms'）//如果屬性以'Ms'開頭

css3propcamel ='m'+ css3propcamel.substr（1）//將'M'轉(zhuǎn)換為小寫

if（root.style中的css3propcamel）

返回css3propcamel

}

返回undefined

}

只需輸入一個未經(jīng)改動的CSS3屬性即可獲得瀏覽器支持的版本。如果瀏覽器不支持任何形式的屬性，undefined則返回。

var transformprop = getcss3prop（'transform'）//返回'transform'或其中一個變體，例如'msTransform'，'MozTransform'，'WebkitTransform'等

var transitionprop = getcss3prop（'transition'）//返回'transition'或其中一個變體，例如'MozTransition'，'WebkitTransition'等

獲得CSS3屬性的受支持版本后，您可以動態(tài)探測或設(shè)置其值，例如：

if（transformprop）{//如果已定義

var el = document.getElementById（'box'）

el.style [transformprop] ='rotate（180deg）scale（1.05,1.05）'

}

關(guān)于“如何使用JavaScript動態(tài)設(shè)置CSS3屬性值”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

如何使用JavaScript動態(tài)設(shè)置CSS3屬性值

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽