JavaScript征服Style的五種武器
在HTML的世界裡,對於一個元素來說,看的主要不是氣質,而是它的Style,因為Style決定了顏值。俗話說,JavaScript與Style,得其一者得天下。但是,Style永遠無法改變JavaScript,JavaScript卻可以征服Style。因為JavaScript有五種武器,所以可以對Style為所欲為,既可遠觀,亦可褻玩。
第一種武器是className
,在JavaScript,得到一個元素的className
就是得到了這個元素的class
屬性的值。Show Code:
<div id="box" class="one two"/>
<script>
var box = document.getElementById("box")
alert(box.className)
box.className += ' three'
</script>
上面的程式碼拿到box
的class
,然後又給它新增了一個three
。如果想去掉某個class
,只要通過字串操作去掉,然後重新給className
賦值就可以了。
第二種武器是style
,確切地說,這是個武器包,你幾乎可以用它修改所有style
。比如說你執行了box.style.width='100px'
,就相當於在box
上新增了一個style="width:100px"
。
對於那些由多個單片語成的style值,就是background-color
、marigin-top
之類的,要把橫線去掉,然後單詞的首字母大寫。對,改成像backgroundColor
、mariginTop
這樣。像-moz-border-radius
這種,也是把-
去掉,然後後面的字母換成大寫,就是改成MozBorderRadius
。
因為style屬性優先與css,所以你可以用style覆蓋掉css中設定的樣式,也可以把它設成空字串還原:
var box = document.getElementById("box")
box.style.width='100px'
box.style.width=''
上面的程式碼最終會保持box的width
不變。
第三種武器是cssText
,好吧,實際上它也是style中的一個屬性。但因為它很強大,所以我們特意提高了它的地位。用style.cssText
可以獲取和設定完整的style內容。
<div>Button</div>
<script>
var div = document.body.children[0]
div.style.cssText='color: red !important; \
background-color: yellow; \
width: 100px; \
text-align: center; \
blabla: 5; \
'
alert(div.style.cssText)
</script>
瀏覽器會對cssText
進行解析,然後把解析結果應用到元素上去。上面程式碼中那個不認識blabla就直接忽略掉了,不會報錯,所以要注意typo。
並且如果你想加!important
,只能用cssText
。
接下來要出場的,是真正重量級的兩種武器,或者說一又十分之一種武器。一種是標準的getComputedStyle
,另外一種是它的十分之一變種,自戀的M$IE專為自己打造的currentStyle
(哦,據說它的市場份額只有十分之一了嘛)。
在真實的頁面中,我們很少見到在元素的style
屬性中設定的樣式,所以用style
幾乎讀取不到任何元素的Style。比如下面這個例子:
<style>
body { margin: 10px }
</style>
<body>
<script>
alert(document.body.style.marginTop)
</script>
</body>
是得不到任何值的。
這種需求只能靠window.getComputedStyle
來解決,這個方法是DOM Level 2的標準方法,所有瀏覽器(除了IE < 9)都支援。
所以要獲取上面那個例子中的marginTop,以及所有在瀏覽器給元素應用了style和樣式表之後的Style,都可以像下面這樣:
<style>
body { margin: 10px }
</style>
<body>
<script>
var computedStyle = getComputedStyle(document.body, null)
alert(computedStyle.marginTop)
</script>
</body>
至於IE 9之前的瀏覽器,就得用currentStyle
讀取了。或者像這樣:
<style>
body { margin: 10% }
</style>
<body>
<script>
if (window.getComputedStyle) {
var computedStyle = getComputedStyle(document.body, null)
} else {
computedStyle = document.body.currentStyle
}
alert(computedStyle.marginTop)
</script>
</body>
好了,上面就是JavaScript征服Style的五種武器。不過我是隻用前面四種武器的,既然使用者到現在還用IE < 9的瀏覽器,我覺得真的無力服侍好啊,所以還是逃吧。
宣告:本文參考(抄襲)了Styles and classes, getComputedStyle
相關文章
- JavaScript style 屬性JavaScript
- [Javascript] Refactor blocking style code to stream style for fetching the stream dataJavaScriptBloC
- GNU binutils 裡的九種武器
- JavaScript 偵測手機瀏覽器的五種方法JavaScript瀏覽器
- 讓 Python 程式碼更易維護的七種武器Python
- 學習筆記 ProgressBar三種style 水平兩種寫法筆記
- Javascript判斷資料型別的五種方式及其特殊性JavaScript資料型別
- 成為 Linux 運維高手必備的七種“武器”!Linux運維
- WPF style BasedOn base style
- Tungsten Fabric入門寶典丨TF元件的七種“武器”元件
- 014.Vue3入門,style屬性的幾種繫結方法Vue
- 基於【ESLint+JavaScript Standard Style】標準的VUE/JS/html風格指南EsLintJavaScriptVueJSHTML
- 晶片的五種「死」法晶片
- "sideEffects": [ "dist/*", "esm/**/style/*", "lib/**/style/*", "*.less" ], 的作用是什麼IDE
- JavaScript的三種引入方式JavaScript
- html中list-style-type與list-style的區別HTML
- 前端進階之養成一個良好的程式碼風格--JavaScript standard style前端JavaScript
- 防止SQL注入的五種方法
- java建立物件的五種方式Java物件
- Spring Boot的五種部署方式Spring Boot
- JavaScript四捨五入的改進JavaScript
- 五分鐘掌握 JavaScript 中的 IoCJavaScript
- 五種JavaScript富文字編輯器,總有一款適合你JavaScript
- JavaScript中的六種繼承JavaScript繼承
- javascript中的各種問題JavaScript
- JavaScript的幾種繼承方式JavaScript繼承
- JavaScript建立物件的多種方法JavaScript物件
- JavaScript 的 7 種設計模式JavaScript設計模式
- 《代號:火種》正式定名《征服與霸業》!預約全面開啟
- 鄭永年:生存vs征服:中西方兩種哲學及其結果
- vue 的 class 與 style 使用Vue
- [npm資源] naming-style,快速轉換各種命名風格NPM
- [論文速覽] Separating Style and Content for Generalized Style TransferZed
- 武器庫
- 單例模式的五種寫法單例模式
- Redis 的五種資料結構Redis資料結構
- js五種為false的判斷JSFalse
- Spring事務配置的五種方式Spring
- 常見的五種三列布局