通過(guò)js為元素添加多項(xiàng)樣式,瀏覽器全兼容寫法

更新時(shí)間：2014年08月30日 16:39:00 投稿：mdxy-dxy

這篇文章主要介紹了通過(guò)js為元素添加多項(xiàng)樣式,瀏覽器全兼容寫法,需要的朋友可以參考下

js給元素添加多項(xiàng)樣式,瀏覽器全兼容示例寫法：

<a href="javascript:;" id="test" style="font-size:25px;background:#080;">測(cè)試3</a>
<script>
var obj=document.getElementById("test");
var oldStyle=obj.style.cssText;
alert(oldStyle);
obj.style.cssText="border:2px red solid;color:#f00;"+oldStyle;
</script>

js給元素添加多項(xiàng)樣式，最快捷方便的是使用cssText屬性，但其會(huì)重寫整個(gè)style原有的值，要保留原先的style樣式值，很簡(jiǎn)單，可像上示例中一樣，用一個(gè)變量記錄下原先的style原始值,再做一個(gè)字符串的拼接即可。

但要注意的一點(diǎn)是：ie8及以下瀏覽器obj.style.cssText返回的最后一個(gè)樣式值是沒(méi)分號(hào)的，形如：font-size:25px;background:#080 。只想說(shuō)，ie一如既往的讓人感覺(jué)不爽，呵呵。

所以示例中有意將oldStyle放置在字符串拼接的后面，這樣拼接的樣式字符串就算最后一個(gè)樣式值沒(méi)分號(hào)，也不會(huì)出問(wèn)題，各瀏覽器樣式應(yīng)用顯示就一致了，這也算是一個(gè)小技巧吧，沒(méi)啥技術(shù)含量，但易忽略或忘記，知道自己記性不好，Mark下 ^_^

您可能感興趣的文章:

相關(guān)文章

微信小程序模板之分頁(yè)滑動(dòng)欄
這篇文章主要為大家詳細(xì)介紹了微信小程序模板之分頁(yè)滑動(dòng)欄的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
JavaScript測(cè)試工具之Karma-Jasmine的安裝和使用詳解
Jasmine是一個(gè)Javascript的測(cè)試工具，在Karma上運(yùn)行Jasmine可完成Javascript的自動(dòng)化測(cè)試、生成覆蓋率報(bào)告等。本文不包含Jasmine的使用細(xì)節(jié)，這幾天我會(huì)寫一篇Jasmine的入門文章，有興趣的朋友到時(shí)候可以看一下
2015-12-12
IE下使用cloneNode注意事項(xiàng)分享
在開發(fā)百度“地裂特效”時(shí)，發(fā)現(xiàn)了一些匪夷所思的 bug，第一反應(yīng)是特效本身的代碼與頁(yè)面上原有的腳本發(fā)生了沖突，經(jīng)過(guò)調(diào)試發(fā)現(xiàn)，問(wèn)題出現(xiàn)在 cloneNode 的應(yīng)用上
2012-11-11
ECHO.js 純javascript輕量級(jí)延遲加載的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇ECHO.js 純javascript輕量級(jí)延遲加載的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
小程序自定義彈框效果
這篇文章主要為大家詳細(xì)介紹了小程序自定義彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
js如何在字符串中查找某個(gè)字符的位置
這篇文章主要給大家介紹了關(guān)于js如何在字符串中查找某個(gè)字符的位置的相關(guān)資料,在JavaScript中我們經(jīng)常需要對(duì)字符串進(jìn)行各種操作,包括查找包含特定字符的字符串,需要的朋友可以參考下
2023-11-11
js實(shí)現(xiàn)點(diǎn)擊按鈕后給Div圖層設(shè)置隨機(jī)背景顏色的方法
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊按鈕后給Div圖層設(shè)置隨機(jī)背景顏色的方法,實(shí)例分析了javascript操作頁(yè)面div元素屬性及隨機(jī)數(shù)的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
一個(gè)特殊的排序需求的javascript實(shí)現(xiàn)代碼
看了之后1是手癢癢，2是覺(jué)得樓主的實(shí)現(xiàn)有問(wèn)題，就動(dòng)手寫了一下，用js,大概用了30-40分鐘。
2009-09-09
移動(dòng)端手指操控左右滑動(dòng)的菜單
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端手指操控左右滑動(dòng)的菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
js日期相關(guān)函數(shù)dateAdd,dateDiff,dateFormat等介紹
這篇文章主要介紹了js日期相關(guān)函數(shù)dateAdd,dateDiff,dateFormat等介紹,需要的朋友可以參考下
2016-09-09