原生JS實(shí)現(xiàn)獲取及修改CSS樣式的方法
本文實(shí)例講述了原生JS實(shí)現(xiàn)獲取及修改CSS樣式的方法。分享給大家供大家參考，具體如下：
大家都知道在JavaScript原生操作中獲取元素的樣式，在實(shí)際操作是使用時(shí)比較頻繁的一件事，這里像大家介紹下獲取css樣式的方法，希望可以幫助一些需要的人，如果有幸被大?？吹剑懈玫霓k法，歡迎提出！?。?/p>
一、行內(nèi)元素樣式獲?。?/strong>
<!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>
在JS代碼中，alert會(huì)彈出div元素的width為200px；達(dá)到了要獲取元素寬度的目的，但是這種簡(jiǎn)單的方法只適用于獲取元素的行內(nèi)元素樣式，并不能獲取內(nèi)部樣式和外部樣式，在項(xiàng)目中，寫入行內(nèi)元素這種方案并不被大家認(rèn)同，所以這種方法，只是讓大家了解下。
二、非行間樣式元素獲?。?/strong>
如果元素樣式并非行間樣式，利用上面這種方法并不能獲取到元素的樣式，需要使用另一種方法：
<!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>
在上面代碼中，使用了window.getComputedStyle('元素',null).'樣式',此方法兼容性:火狐 谷歌 IE9 獲取的為計(jì)算后的樣式,但是這里需要注意的是用此方法獲取的值為只讀模式,并不能修改,所以用了style.cssText方式修改了其屬性,這里需要注意下書寫方式.
三、兼容性:
前段潛規(guī)則,凡是好的東西都不能通用,是的,你猜對(duì)了,任性的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);
}
方法封裝:
function getStyle(obj,name){
if (obj.currentStyle) {
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
上述代碼感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測(cè)試運(yùn)行一下，看看運(yùn)行結(jié)果如何。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- javascript 動(dòng)態(tài)修改css樣式方法匯總(四種方法)
- JavaScript修改css樣式style
- JS修改css樣式style淺談
- 用JavaScript修改CSS屬性的代碼
- JavaScript修改css樣式style動(dòng)態(tài)改變?cè)貥邮?/a>
- 原生Js實(shí)現(xiàn)元素漸隱/漸現(xiàn)(原理為修改元素的css透明度)
- js 動(dòng)態(tài)修改css文件的方法
- 如何用JavaScript實(shí)現(xiàn)動(dòng)態(tài)修改CSS樣式表
- 原生Javascript/原生JS修改CSS樣式的4種方式簡(jiǎn)單示例
相關(guān)文章
深入淺出JavaScript前端中的設(shè)計(jì)模式
這篇文章主要介紹了JavaScript前端中的設(shè)計(jì)模式，設(shè)計(jì)模式是一套被反復(fù)使用，多數(shù)人知曉的，經(jīng)過分類編目的，代碼設(shè)計(jì)經(jīng)驗(yàn)的總結(jié)，感興趣想要詳細(xì)了解可以參考下文2023-05-05
這篇文章主要介紹了JS繼承用法,實(shí)例分析了拷貝繼承、類繼承及原型繼承等的使用技巧,需要的朋友可以參考下2015-02-02
Input文本框隨著輸入內(nèi)容多少自動(dòng)延伸的實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狪nput文本框隨著輸入內(nèi)容多少自動(dòng)延伸的實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
javascript textContent與innerText的異同分析
因?yàn)榘l(fā)現(xiàn)網(wǎng)絡(luò)上很少有這方面的內(nèi)容，因此就把自己私有blog上的這篇文章搬出來到Boluor的公開blog，方便其它人查閱。2010-10-10
ionic實(shí)現(xiàn)可滑動(dòng)的tab選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了ionic實(shí)現(xiàn)可滑動(dòng)的tab選項(xiàng)卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript中for of和for in的區(qū)別詳解
對(duì)于初學(xué)者，我們或許只知道無論是for of還是for in他們都有一個(gè)功能那就是遍歷，至于具體的細(xì)節(jié)或許我們不是很清楚，那么接下來我們就來詳細(xì)的區(qū)分一下for of和for in他們之間的不同點(diǎn)和相同點(diǎn),需要的朋友可以參考下2023-06-06
js跨域是指通過js在不同的域之間進(jìn)行數(shù)據(jù)傳輸或通信，只要協(xié)議、域名、端口有任何一個(gè)不同，都被當(dāng)作是不同的域，在這篇文章中講給大家介紹一下js中幾種實(shí)用的跨域方法原理,需要的朋友可以參考下2023-06-06
JS常見DOM節(jié)點(diǎn)操作示例【創(chuàng)建 ，插入，刪除，復(fù)制，查找】
這篇文章主要介紹了JS常見DOM節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了JavaScript針對(duì)DOM節(jié)點(diǎn)的創(chuàng)建 ，插入，刪除，復(fù)制，查找等操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下2018-05-05
uniapp-路由uni-simple-router安裝配置教程
專為uniapp打造的路由器，和uniapp深度集成，uniapp用到了很多vue的api，但在路由管理的功能相對(duì)于vue-router還是比較欠缺的，比如全局導(dǎo)航守衛(wèi)，本文給大家講解uniapp-路由uni-simple-router相關(guān)知識(shí)，感興趣的朋友跟隨小編一起看看吧2022-11-11
document.getElementByName方法沒有document.getElementsByName得到的是標(biāo)簽的數(shù)組，下面為大家詳細(xì)介紹下具體的使用，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08