亚洲丰满熟女一区二区V,性色AV天堂一区二区三区,国产三级专区精品

一說起操作css 樣式很多人都會想到 jQuery 的 css 方法： $(selector).css(name) ，但是有思考過如何使用原生javascript 來實現類似的功能么？本文和大家分享的就是使用原生javascript 實現 css 樣式相關內容，一起來看看吧，希望對大家學習javascript有所幫助。

　　大家最熟悉的原生js 操作樣式的方法非 DOM 中的 Style 對象莫屬了，但是這個方法只能獲取和修改 html 文檔中的內聯樣式，無法操作非內聯樣式（內部樣式和外部樣式表）。我通過搜索和整理，總結了使用原生 js 對 css 樣式的讀寫實現。

　　獲取樣式

　　1. dom style

　　這個方法只能獲取內聯樣式：

　　var text = document.getElementById('text');var textColor = text.style.color;

　　// 得到 textColor 的值為 '#000'

　　2. currentStyle

　　這個方法只適用于IE 瀏覽器，在形式上與 element.style 相近，區(qū)別在于正如 currentStyle 其名 —— 目前的樣式（ css 加載后的樣式），返回的是元素當前最終的 CSS 屬性值，包括了內部 style 標簽里的樣式和外部引入的 css 文件。

　　用法：元素.currentStyle. 屬性

　　比如我們要獲取id 為 box 的 width ：

　　var boxWidth = document.getElementById('box').currentStyle.width;

　　// 得到 boxWidth 的值為 '200px'

　　3. getComputedStyle

　　getComputedStyle 是一個可以獲取當前元素所有最終使用的 CSS 屬性值。返回的是一個 CSS 樣式聲明對象 ([object CSSStyleDeclaration]) ，并且是只讀的。

　　在兼容性上，基本支持：Chrome 、 Firfox 、 IE9 、 Opera 、 Safari

　　用法：getComputedStyle( 元素 , 偽類 ). 屬性，第二個參數如果不是偽類就設置為 null 吧。

　　var el = document.getElementById("box");var style = window.getComputedStyle(el , ":after");

　　來～封裝一個通用的獲取樣式的函數

　　為了適用于各大主流瀏覽器，我們來寫一個函數：

　　// 這個函數需要傳遞兩個參數：元素對象和樣式屬性名稱

　　function getStyle(el, styleName) {

　　if( el.currentStyle ) {

　　// for IE

　　return el.currentStyle[styleName];

　　} else {

　　// for peace

　　return getComputedStyle(el, false)[styleName];

　　}

　　接著調用這個函數來獲取box 的寬度：

　　var box = document.getElementById("box");

　　var boxWidth = getStyle(box, 'width');

　　這個函數并沒有考慮到對偽類的相關操作，可以根據需要自行擴展～

　　getComputedStyle 與 style 的區(qū)別？

　　既然都是獲取樣式屬性的值，它們有啥區(qū)別呢：

　　1. 只讀與可寫

　　getComputedStyle 方法是只讀的，只能獲取樣式而不能設置，但是 element.style 既能讀也能寫。

　　2. 獲取的對象范圍

　　getComputedStyle 方法獲取的是最終應用在元素上的所有 CSS 屬性對象（即使沒有 CSS 代碼，也會把默認的祖宗八代都顯示出來）；而 element.style 只能獲取元素 style 屬性中的 CSS 樣式。因此對于一個光禿禿的元素

，getComputedStyle 方法返回對象中 length 屬性值（如果有）就是 190+( 據我測試 FF:192, IE9:195, Chrome:253, 不同環(huán)境結果可能有差異 ), 而 element.style 就是 0 。

　　設置樣式

　　1. dom style

　　這個不用說了吧，比如把元素的背景顏色改為紅色：

　　var el = document.getElementById('box');

　　el.style.backgroundColor = 'red';

　　2. cssText 屬性

　　cssText 的本質就是設置 HTML 元素的 style 屬性值。它是一組樣式屬性及其值的文本表示。這個文本格式化為一個 CSS 樣式表，去掉了包圍屬性和值的元素選擇器的花括號。

　　它的用法和innerHTML 類似： document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

來源：悟空的博客

99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

使用原生javascript讀寫CSS樣式

熱門帖子

Swift 教程

最新帖子

Xcode 9.4下載