欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS如何設置元素樣式的方法示例

 更新時間:2017年08月28日 16:29:27   作者:璿而不華  
本篇文章主要介紹了JS如何設置元素樣式的方法示例,主要介紹了三種方法,具有一定的參考價值,有興趣的可以了解一下

一看到這個標題,大家可能首先想到的就是使用“[元素].style.[CSS屬性名] = [屬性值]”這樣的套路去設置元素樣式,但實際上,我們其實還有其他方式可以選擇。

接下來,我將詳細介紹三種設置元素樣式的方式。

一、style

這個其實就是我們所熟知的方式,舉個例子~~

<div id="box"></div>
var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";

顯示效果:

這種方式看似簡單粗暴,但寫法過于繁冗,尤其是在需要添加很多樣式時尤為突出。并且需要注意的是,對于使用短劃線的CSS屬性名,必須將其轉換成駝峰大小寫形式。(如示例中的backgroundColor)

二、style.cssText

這種方式相對于上面方法更為簡潔,更像是直接在元素上寫CSS:

[元素].style.cssText = [CSS樣式];

例如:

box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

確實,寫法上很方便。

但是,缺點是后面同樣通過這種方式添加的樣式會覆蓋之前通過style特性指定的樣式。

同樣還是上面的例子,只不過是將兩段JS寫在一塊:

var box = document.getElementById("box");
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = "#f00";
box.style.cssText = 'width: 200px; height: 200px; border: 1px solid #f00;';

如果按照層疊樣式表的特性,上面定義的紅色的背景顏色應該還存在,然而實際上,下面通過style.cssText方式定義的樣式會將style(包括style.cssText)方式添加的樣式全部重寫。所以,這個例子最終表現(xiàn)結果與上面只有一句時的效果是一樣的:

最后注意下兼容性,IE8及更早版本均不支持cssText。

三、insertRule()

這個用法相對上面兩種方法都較為復雜一些:

[sheet].insertRule([CSS樣式],指定位置)

[sheet]表示某個樣式表,它可以通過document.styleSheets來獲得。那么,document.styleSheets又是什么呢? 說得簡單一點就是應用在文檔中的所有樣式表,包括通過link標簽引入的樣式和style標簽定義的樣式。如果理解上還是有點困難,那么我們還是放個實例吧~~

首先頭部引入樣式表:

<link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" />

當然,這個樣式表得真實存在,就算里面什么樣式都不寫也沒關系。也可以直接用style標簽,內(nèi)容為空也不要緊。

然后用JS獲取這個樣式表:

var sheet = document.styleSheets[0];

最后我們就可以給這個樣式表中添加樣式了:

sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

如果是在上面所有例子的基礎上添加的這段代碼,那么顯示結果會是這樣的:

大小還是200*200大小,背景顏色是綠色,說明通過style.cssText所設置的寬高樣式把通過insertRule()設置的樣式覆蓋了,原因很簡單,style(包括style.cssText)方式設置的樣式屬于行內(nèi)樣式,自然要比通過insertRule()設置的樣式優(yōu)先級更高咯~~

那么,示例當中insertRule()的第二個參數(shù)0又是指的什么呢?

它指的是我們需要添加CSS代碼的位置,所以參數(shù)0就代表的是該樣式表的最開始位置。

例如,我們先給樣式表中手動添加一段樣式(以下例子與上述例子無關):

<style>
  #box{ width: 100px; height: 100px;}
</style>
var sheet = document.styleSheets[0];
sheet.insertRule('#box{width: 300px; height: 300px; background-color: #0f0;}',0);

以上執(zhí)行結果就是,寬高100*100的綠色盒子:

如果將insertRule()中的第二個參數(shù)改為1,那么通過JS添加的這段CSS代碼相當于添加到了#box{ width: 100px; height: 100px;}的后面,類似下面這樣:

<style>
  #box{ width: 100px; height: 100px;}
  #box{ width: 300px; height: 300px; background-color: #0f0;}
</style>

顯示結果:

同樣需要注意的是,insertRule()不兼容IE8及更早版本,但可以使用addRule()替代,語法稍微有點不同,上面例子這樣寫:

復制代碼 代碼如下:

sheet.addRule('#box','width: 300px; height: 300px; background-color: #0f0;',0);

第一個參數(shù)代表元素,第二個參數(shù)代表CSS樣式,第三個參數(shù)代表插入位置,前兩個參數(shù)必選,最后一個可選,不填則默認為0。

結束語:瀏覽器兼容性問題對于前端開發(fā)者來說一直是個很頭疼的問題,很多問題也是主要集中在IE上,只希望可惡的IE早日退出歷史舞臺吧!希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • JS實現(xiàn)圖片放大縮小的方法

    JS實現(xiàn)圖片放大縮小的方法

    這篇文章主要介紹了JS實現(xiàn)圖片放大縮小的方法,結合實例形式分析了javascript動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下
    2017-02-02
  • JavaScript使用setTimeout實現(xiàn)倒計時效果

    JavaScript使用setTimeout實現(xiàn)倒計時效果

    這篇文章主要為大家詳細介紹了JavaScript使用setTimeout實現(xiàn)倒計時效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-02-02
  • 微信小程序Getuserinfo解決方案圖解

    微信小程序Getuserinfo解決方案圖解

    本文通過圖文并茂的形式給大家介紹了微信小程序Getuserinfo解決方案,需要的朋友可以參考下
    2018-08-08
  • 詳解webpack進階之loader篇

    詳解webpack進階之loader篇

    本篇文章主要介紹了詳解webpack進階之loader篇,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • 微信小程序分包的超詳細步驟

    微信小程序分包的超詳細步驟

    分包指的是把一個完整的小程序項目,按照需求劃分為不同的子包,在構建時打包成不同的分包,用戶在使用時按需進行加載,下面這篇文章主要給大家介紹了關于微信小程序分包的相關資料,需要的朋友可以參考下
    2022-09-09
  • 淺析JavaScript函數(shù)的調(diào)用模式

    淺析JavaScript函數(shù)的調(diào)用模式

    這篇文章主要為大家詳細介紹了JavaScript函數(shù)的調(diào)用模式,包括方法調(diào)用模式,構造器調(diào)用模式,apply/call調(diào)用模式,感興趣的小伙伴們可以參考一下
    2016-08-08
  • 用javascript讀取xml文件讀取節(jié)點數(shù)據(jù)

    用javascript讀取xml文件讀取節(jié)點數(shù)據(jù)

    這篇文章主要介紹了用javascript讀取xml文件讀取節(jié)點數(shù)據(jù)的具體實現(xiàn),需要的朋友可以參考下
    2014-08-08
  • layer.msg()去掉默認時間,實現(xiàn)手動關閉的方法

    layer.msg()去掉默認時間,實現(xiàn)手動關閉的方法

    今天小編就為大家分享一篇layer.msg()去掉默認時間,實現(xiàn)手動關閉的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 詳解js刪除數(shù)組中的指定元素

    詳解js刪除數(shù)組中的指定元素

    在本篇文章中我們給大家分享了js刪除數(shù)組中的指定元素的詳實示例方法,有需要的朋友們學習下
    2018-10-10
  • 讓AJAX不依賴后端接口實現(xiàn)方案

    讓AJAX不依賴后端接口實現(xiàn)方案

    網(wǎng)頁中的ajax請求越來越多,或者應用開始就一直使用ajax與后端進行數(shù)據(jù)交換,本文將詳細介紹,需要的朋友可以參考下
    2012-12-12

最新評論