原生JS實現獲取及修改CSS樣式的方法

家都知道在JavaScript原生操作中獲取元素的樣式，在實際操作是使用時比較頻繁的一件事，這里像大家介紹下獲取css樣式的方法，希望可以幫助一些需要的人，如果有幸被大牛看到，有更好的辦法，歡迎提出！！！

一、行內元素樣式獲取：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js獲取外部樣式</title>
</head>
<body>
 <div id="div" style="width:200px;height:200px;border:3px solid cyan;"></div>
</body>
<script>
 //獲取行間樣式
 var div = document.getElementById('div');
 var width = div.style.width;
 alert(width);//200px
</script>
</html>

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力

在JS代碼中，alert會彈出div元素的width為200px；達到了要獲取元素寬度的目的，但是這種簡單的方法只適用于獲取元素的行內元素樣式，并不能獲取內部樣式和外部樣式，在項目中，寫入行內元素這種方案并不被大家認同，所以這種方法，只是讓大家了解下。

二、非行間樣式元素獲取：

如果元素樣式并非行間樣式，利用上面這種方法并不能獲取到元素的樣式，需要使用另一種方法：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js獲取內部部樣式</title>
 <style>
 #div{
 width: 200px;
 height: 200px;
 border:3px solid cyan;
 }
 </style>
</head>
<body>
 <div id="div""></div>
</body>
<script>
 var div = document.getElementById('div');
 //獲取div的width
 var width = window.getComputedStyle(div,null).width;
 alert(width);//200px
 //修改div的width
 div.style.cssText='width:300px;'
</script>
</html>

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力

在上面代碼中，使用了window.getComputedStyle('元素',null).'樣式',此方法兼容性:火狐谷歌 IE9 獲取的為計算后的樣式,但是這里需要注意的是用此方法獲取的值為只讀模式,并不能修改,所以用了style.cssText方式修改了其屬性,這里需要注意下書寫方式.

三、兼容性:

前段潛規則,凡是好的東西都不能通用,是的,你猜對了,任性的IE并不能使用以上方法,但是IE有自己的方法為currentStyle,用法一樣,就不再贅述了,下面直接寫出已經處理兼容的代碼如下:

var div = document.getElementById('div');
if (div.currentStyle) {
 console.log(div.currentStyle.width);
}else{
　　console.log(getComputedStyle(div,null).width);
}

方法封裝:

 if (obj.currentStyle) {
 return obj.currentStyle[name];
 }else{
 return getComputedStyle(obj,false)[name];
 }
}

對前端的技術，架構技術感興趣的同學關注我的頭條號，并在后臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料

知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！！

avaScript動態設置CSS樣式實例分析

通過使用文檔對象模型DOM，可以將HTML文件當做文檔對象，并按照文檔對象處理方法進行處理。主要處理形式包括設置HTML標記文本內容、設置元素屬性值及對Style樣式進行操作等。本文主要介紹使用文檔對象模型DOM所提供的Element、HTMLElement等實現對元素Style樣式進行快速設置。

DOM標準

DOM（Document Object Model）文檔對象模型是W3C提出的技術規范，該規范與瀏覽器、平臺、語言無關。HTML DOM是指適用于HTML的文檔對象模型。因此在JavaScript中我們所認識的DOM應當可以理解為HTML DOM。DOM標準相關對象關系描述如下圖所示：

DOM標準概念與關系

在DOM標準對象描述中可以看出所有的對象都繼承于Node對象，Node對象是DOM文檔對象模型的核心。在JavaScript文檔對象模型中，Document對象、Element對象等都繼承于Node對象，而HTMLDocument對象與HTMLElement對象等又分別繼承于Document對象與Element對象。

Element對象提供了HTML頁面中所有的元素方法與屬性。我們可以借助HTMLElement對象實現對HTML頁面元素進行操作與屬性值讀寫等。

HTMLElement設置CSS樣式

HTMLElement對象繼承自Element對象，因此具有其父類的基本屬性與方法。在Element對象主要提供style屬性與setAttribute()方法實現對元素樣式屬性及屬性值進行設置。兩種方法描述如下：

1、style屬性

style屬性是HTMLElement繼承自父類Element的基本屬性之一，主要用于對HTML樣式屬性進行設置或者樣式屬性值的讀取。在進行樣式屬性值設置過程中可以分為兩種方式進行設置。第一種為設置單個特定style樣式，如設置background-color屬性值，我們可直接使用如下方法進行設置：

HTMLElement.style.property=value;

第二種設置方法是同時對某個元素全部style樣式進行重新設置，這種情況下我們使用style.cssText屬性進行整體屬性設置，設置語法描述如下：

HTMLElement.style.cssText="property1:value1;...propertyN:valueN";

2、setAttribute()方法設置CSS

setAttribute()方法也是Element對象的基本方法之一，主要用于設置指定元素的指定屬性值。如該屬性值存在則更新屬性值。在HTMLElement對象中我們可以直接使用setAttribute方法進行style屬性的值的設置。其基本語法描述如下：

HTMLElement.setAttribute(name,value);

動態CSS樣式設置實例

本例主要設置實現在鼠標經過某一個DIV時，動態改變該DIV層的style樣式屬性，主要改變屬性包括背景顏色、字體大小及光標形狀等。設計原始DIV樣式效果如下圖：

原始CSS樣式

該案例原始CSS樣式實現代碼描述如下圖所示：

原始頁面實現代碼

按照實例要求我們為div層添加鼠標over事件，并編寫事件處理函數用于響應鼠標處理，具體處理需要實現style樣式變化要求。對該div添加onmouseover事件，響應函數名稱為changeStyle()。代碼描述如下：

事件處理函數

在該事件處理函數中我們傳遞了用于標識當前元素的this參數，函數在接收到該參數后能夠直接定位與當前div，并進行下一步處理。changeStyle方法描述如下：

事件處理方法1

事件處理方法1使用style.cssText方法進行了CSS樣式的動態設置，使用setAttribure方法進行樣式設置代碼如下：

事件處理方法2

通過編寫以上代碼可以實現鼠標經過DIV時，style樣式中的背景顏色、文字大小及光標樣式的動態變化，變化之后效果描述如下圖：

動態改變樣式效果

以上給出了Element、HTMLElement及DOM基本概念說明，并對HTMLElement對象style屬性與setAttribute方法在CSS樣式改變中的應用進行了語法說明與實例分析。如需完整代碼關注并私信。

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！相關文章鏈接如下：

前端設計-JavaScript實現復選框的分組單選

本文由kid編程原創，歡迎關注，帶你一起長知識！

言

瀏覽器自帶的input標簽，例如text,radio,checkbox的樣式都顯得很難看，雖然已經有類似于Bootstrap這種穩定的類庫可以使用，但是對于定制化的input樣式同樣難以滿足，今天我們就自己動手，一起來看看如何使用CSS3實現一個好看的input樣式。

CSS3

如果感興趣的，可以去github上去看源碼進行學習，地址如下：

https://github.com/zhouxiongking/article-pages/tree/master/articles/beautifulInput

input-text

首先我們來看下type為text的文本框元素，實現的動態效果如下圖所示。

效果圖

實現過程

接下來我們來看看這樣的效果是如何實現的。頁面上的元素主要是以下幾個部分。

input元素，將其border設置為none
label元素，與input元素綁定
div元素，實際為下面的橫線

我們需要達到的效果是，在未點擊input元素時，通過label元素顯示提示信息；在input元素獲得焦點后label元素會移動到input元素上面，并且顯示出動態的獲取焦點的過程，此后可以在input元素中正常輸入信息。

代碼組成

首先我們來看看HTML部分的代碼。

HTML代碼

通過html部分代碼，可以看出頁面主要由input，label，div三個元素構成。

然后我們再來看看CSS部分的代碼，由于CSS部分代碼比較多，我們拆開來看。

先看最外層的容器樣式代碼如下。

外層容器

然后是input標簽的樣式，在CSS3中提供了placehoder的樣式，在這里為了防止placeholder屬性會覆蓋到label標簽，我們將其透明度設置為0。關于input元素以及其placeholder屬性值的css樣式部分如下所示。

input樣式

緊接著是下面的label標簽的樣式，因為在input獲取焦點時，label元素會移動到input上方，因此需要給label元素加上一個動畫效果。label部分代碼如下所示。

label部分代碼

其次是最下面的一條橫線，在input元素未獲取焦點的狀態下，其長度為0。

橫線

最后是在input獲取焦點后的樣式變化，下面的橫線會逐漸延長至最大寬度，而且具有不同的顏色，這一動態效果由下面的代碼決定。

獲取焦點動態效果

至此，頁面上所有的代碼均已完成，在瀏覽器中運行頁面后會看到文章開始時的效果。

結束

在萬千已經成型的前端框架中，自己寫出一個樣式也算是一種收獲，在后面的文章中，我會繼續寫關于如何實現checkbox和radio樣式的文章，敬請期待~

在線咨詢

上一篇：如何使用CSS開發精美3D旋轉相冊？
下一篇：清華大學在高活性骨誘導膜的設計取得新進展

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商