原生JS實(shí)現(xiàn)獲取及修改CSS樣式的方法
本文實(shí)例講述了原生JS實(shí)現(xiàn)獲取及修改CSS樣式的方法。分享給大家供大家參考，具體如下：
大家都知道在JavaScript原生操作中獲取元素的樣式，在實(shí)際操作是使用時(shí)比較頻繁的一件事，這里像大家介紹下獲取css樣式的方法，希望可以幫助一些需要的人，如果有幸被大牛看到，有更好的辦法，歡迎提出?。?！
一、行內(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頁(yè)面元素操作技巧總結(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)文章
今天小編就為大家分享一篇關(guān)于Javascript刪除數(shù)組里的某個(gè)元素，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-02-02
javascript溫習(xí)的一些筆記 基礎(chǔ)常用知識(shí)小結(jié)
在電腦上找到多年前的javascript的一些小筆記，因?yàn)橐獙⒐P記本上面的文件整理一下， 不用的刪除掉， 所以將此篇筆記再發(fā)布一下，存檔到自己的博客吧， 電腦上的文件就刪除了2011-06-06
這篇文章主要介紹了JavaScript事件對(duì)象,結(jié)合實(shí)例形式深入分析了javascript DOM、IE及其他瀏覽器相關(guān)事件對(duì)象操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12
D3.js實(shí)現(xiàn)力向?qū)D的繪制教程詳解
力向?qū)D是繪圖的一種算法，實(shí)現(xiàn)了用以模擬粒子物理運(yùn)動(dòng)的?velocity?Verlet?數(shù)值積分器。本文將利用D3.js實(shí)現(xiàn)力向?qū)D的繪制，需要的可以參考一下2022-11-11
javascript中IE瀏覽器不支持NEW DATE()帶參數(shù)的解決方法
在火狐下 可以正常取得時(shí)間，在IE7下 卻是 NaN。糾結(jié)老長(zhǎng)時(shí)間，放棄了new date 然后再老外的論壇中找了一段段代碼可以兼容所有瀏覽器的格式化日期代碼2012-03-03
Mixin是一種思想,用部分實(shí)現(xiàn)的接口來實(shí)現(xiàn)代碼復(fù)用?？梢杂脕斫鉀Q多繼承的問題,又可以用來擴(kuò)展功能。下面這篇文章主要給大家介紹了關(guān)于為微信小程序增加mixin擴(kuò)展的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
前端JavaScript經(jīng)典之Promise詳解
Promise是為了解決回調(diào)地獄問題而誕生的,它提供了優(yōu)雅的異步回調(diào)解決方案,這篇文章主要介紹了前端JavaScript經(jīng)典之Promise的相關(guān)資料,需要的朋友可以參考下2024-09-09
這篇文章主要給大家介紹了利用d3.js實(shí)現(xiàn)立體柱圖的方法，文中給出了詳細(xì)的介紹和示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來一起看看吧。2017-04-04
這篇文章主要介紹了JavaScript this使用方法圖解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
獲取客戶端網(wǎng)卡MAC地址和IP地址實(shí)現(xiàn)JS代碼
獲取客戶端的一些信息，如IP和MAC，以結(jié)合身份驗(yàn)證，相信很多人都會(huì)這樣做吧，我們這里用Javascript，這樣做的好處是不需要服務(wù)器端進(jìn)行處理，有客戶端自行獲取，感興趣的你可以參考下哈2013-03-03