整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
家都知道在JavaScript原生操作中獲取元素的樣式，在實際操作是使用時比較頻繁的一件事，這里像大家介紹下獲取css樣式的方法，希望可以幫助一些需要的人，如果有幸被大牛看到，有更好的辦法，歡迎提出！！！
一、行內(nèi)元素樣式獲取：
<!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>
前端全棧學(xué)習(xí)交流圈：866109386,面向1-3經(jīng)驗?zāi)昵岸碎_發(fā)人員,幫助突破技術(shù)瓶頸，提升思維能力
在JS代碼中，alert會彈出div元素的width為200px；達到了要獲取元素寬度的目的，但是這種簡單的方法只適用于獲取元素的行內(nèi)元素樣式，并不能獲取內(nèi)部樣式和外部樣式，在項目中，寫入行內(nèi)元素這種方案并不被大家認同，所以這種方法，只是讓大家了解下。
二、非行間樣式元素獲取：
如果元素樣式并非行間樣式，利用上面這種方法并不能獲取到元素的樣式，需要使用另一種方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js獲取內(nèi)部部樣式</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>
前端全棧學(xué)習(xí)交流圈：866109386,面向1-3經(jīng)驗?zāi)昵岸碎_發(fā)人員,幫助突破技術(shù)瓶頸，提升思維能力
在上面代碼中，使用了window.getComputedStyle('元素',null).'樣式',此方法兼容性:火狐 谷歌 IE9 獲取的為計算后的樣式,但是這里需要注意的是用此方法獲取的值為只讀模式,并不能修改,所以用了style.cssText方式修改了其屬性,這里需要注意下書寫方式.
三、兼容性:
前段潛規(guī)則,凡是好的東西都不能通用,是的,你猜對了,任性的IE并不能使用以上方法,但是IE有自己的方法為currentStyle,用法一樣,就不再贅述了,下面直接寫出已經(jīng)處理兼容的代碼如下:
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];
}
}
對前端的技術(shù)，架構(gòu)技術(shù)感興趣的同學(xué)關(guān)注我的頭條號，并在后臺私信發(fā)送關(guān)鍵字：“前端”即可獲取免費的架構(gòu)師學(xué)習(xí)資料
知識體系已整理好，歡迎免費領(lǐng)取。還有面試視頻分享可以免費獲取。關(guān)注我，可以獲得沒有的架構(gòu)經(jīng)驗哦！！
avaScript動態(tài)設(shè)置CSS樣式實例分析
通過使用文檔對象模型DOM，可以將HTML文件當做文檔對象，并按照文檔對象處理方法進行處理。主要處理形式包括設(shè)置HTML標記文本內(nèi)容、設(shè)置元素屬性值及對Style樣式進行操作等。本文主要介紹使用文檔對象模型DOM所提供的Element、HTMLElement等實現(xiàn)對元素Style樣式進行快速設(shè)置。
DOM（Document Object Model）文檔對象模型是W3C提出的技術(shù)規(guī)范，該規(guī)范與瀏覽器、平臺、語言無關(guān)。HTML DOM是指適用于HTML的文檔對象模型。因此在JavaScript中我們所認識的DOM應(yīng)當可以理解為HTML DOM。DOM標準相關(guān)對象關(guān)系描述如下圖所示：
DOM標準概念與關(guān)系
在DOM標準對象描述中可以看出所有的對象都繼承于Node對象，Node對象是DOM文檔對象模型的核心。在JavaScript文檔對象模型中，Document對象、Element對象等都繼承于Node對象，而HTMLDocument對象與HTMLElement對象等又分別繼承于Document對象與Element對象。
Element對象提供了HTML頁面中所有的元素方法與屬性。我們可以借助HTMLElement對象實現(xiàn)對HTML頁面元素進行操作與屬性值讀寫等。
HTMLElement對象繼承自Element對象，因此具有其父類的基本屬性與方法。在Element對象主要提供style屬性與setAttribute()方法實現(xiàn)對元素樣式屬性及屬性值進行設(shè)置。兩種方法描述如下：
1、style屬性
style屬性是HTMLElement繼承自父類Element的基本屬性之一，主要用于對HTML樣式屬性進行設(shè)置或者樣式屬性值的讀取。在進行樣式屬性值設(shè)置過程中可以分為兩種方式進行設(shè)置。第一種為設(shè)置單個特定style樣式，如設(shè)置background-color屬性值，我們可直接使用如下方法進行設(shè)置：
HTMLElement.style.property=value;第二種設(shè)置方法是同時對某個元素全部style樣式進行重新設(shè)置，這種情況下我們使用style.cssText屬性進行整體屬性設(shè)置，設(shè)置語法描述如下：
HTMLElement.style.cssText="property1:value1;...propertyN:valueN";2、setAttribute()方法設(shè)置CSS
setAttribute()方法也是Element對象的基本方法之一，主要用于設(shè)置指定元素的指定屬性值。如該屬性值存在則更新屬性值。在HTMLElement對象中我們可以直接使用setAttribute方法進行style屬性的值的設(shè)置。其基本語法描述如下：
HTMLElement.setAttribute(name,value);本例主要設(shè)置實現(xiàn)在鼠標經(jīng)過某一個DIV時，動態(tài)改變該DIV層的style樣式屬性，主要改變屬性包括背景顏色、字體大小及光標形狀等。設(shè)計原始DIV樣式效果如下圖：
原始CSS樣式
該案例原始CSS樣式實現(xiàn)代碼描述如下圖所示：
原始頁面實現(xiàn)代碼
按照實例要求我們?yōu)閐iv層添加鼠標over事件，并編寫事件處理函數(shù)用于響應(yīng)鼠標處理，具體處理需要實現(xiàn)style樣式變化要求。對該div添加onmouseover事件，響應(yīng)函數(shù)名稱為changeStyle()。代碼描述如下：
事件處理函數(shù)
在該事件處理函數(shù)中我們傳遞了用于標識當前元素的this參數(shù)，函數(shù)在接收到該參數(shù)后能夠直接定位與當前div，并進行下一步處理。changeStyle方法描述如下：
事件處理方法1
事件處理方法1使用style.cssText方法進行了CSS樣式的動態(tài)設(shè)置，使用setAttribure方法進行樣式設(shè)置代碼如下：
事件處理方法2
通過編寫以上代碼可以實現(xiàn)鼠標經(jīng)過DIV時，style樣式中的背景顏色、文字大小及光標樣式的動態(tài)變化，變化之后效果描述如下圖：
動態(tài)改變樣式效果
以上給出了Element、HTMLElement及DOM基本概念說明，并對HTMLElement對象style屬性與setAttribute方法在CSS樣式改變中的應(yīng)用進行了語法說明與實例分析。如需完整代碼關(guān)注并私信。
本頭條號長期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區(qū)回復(fù)。更多程序設(shè)計相關(guān)教程及實例分享，期待大家關(guān)注與閱讀！相關(guān)文章鏈接如下：
前端設(shè)計-JavaScript實現(xiàn)復(fù)選框的分組單選
本文由kid編程原創(chuàng)，歡迎關(guān)注，帶你一起長知識！
瀏覽器自帶的input標簽，例如text,radio,checkbox的樣式都顯得很難看，雖然已經(jīng)有類似于Bootstrap這種穩(wěn)定的類庫可以使用，但是對于定制化的input樣式同樣難以滿足，今天我們就自己動手，一起來看看如何使用CSS3實現(xiàn)一個好看的input樣式。
CSS3
如果感興趣的，可以去github上去看源碼進行學(xué)習(xí)，地址如下：
https://github.com/zhouxiongking/article-pages/tree/master/articles/beautifulInput
首先我們來看下type為text的文本框元素，實現(xiàn)的動態(tài)效果如下圖所示。
效果圖
接下來我們來看看這樣的效果是如何實現(xiàn)的。頁面上的元素主要是以下幾個部分。
input元素，將其border設(shè)置為none
label元素，與input元素綁定
div元素，實際為下面的橫線
我們需要達到的效果是，在未點擊input元素時，通過label元素顯示提示信息；在input元素獲得焦點后label元素會移動到input元素上面，并且顯示出動態(tài)的獲取焦點的過程，此后可以在input元素中正常輸入信息。
首先我們來看看HTML部分的代碼。
HTML代碼
通過html部分代碼，可以看出頁面主要由input，label，div三個元素構(gòu)成。
然后我們再來看看CSS部分的代碼，由于CSS部分代碼比較多，我們拆開來看。
先看最外層的容器樣式代碼如下。
外層容器
然后是input標簽的樣式，在CSS3中提供了placehoder的樣式，在這里為了防止placeholder屬性會覆蓋到label標簽，我們將其透明度設(shè)置為0。關(guān)于input元素以及其placeholder屬性值的css樣式部分如下所示。
input樣式
緊接著是下面的label標簽的樣式，因為在input獲取焦點時，label元素會移動到input上方，因此需要給label元素加上一個動畫效果。label部分代碼如下所示。
label部分代碼
其次是最下面的一條橫線，在input元素未獲取焦點的狀態(tài)下，其長度為0。
橫線
最后是在input獲取焦點后的樣式變化，下面的橫線會逐漸延長至最大寬度，而且具有不同的顏色，這一動態(tài)效果由下面的代碼決定。
獲取焦點動態(tài)效果
至此，頁面上所有的代碼均已完成，在瀏覽器中運行頁面后會看到文章開始時的效果。
在萬千已經(jīng)成型的前端框架中，自己寫出一個樣式也算是一種收獲，在后面的文章中，我會繼續(xù)寫關(guān)于如何實現(xiàn)checkbox和radio樣式的文章，敬請期待~
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
