溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關使用JavaScript怎么獲取并修改CSS樣式，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
一、行內元素樣式獲取：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js獲取外部樣式</title>
</head>
<body>
<div id="div" ></div>
</body>
<script>
//獲取行間樣式
var div = document.getElementById('div');
var width = div.style.width;
alert(width);//200px
</script>
</html>在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>在上面代碼中，使用了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);
}方法封裝:
function getStyle(obj,name){
if (obj.currentStyle) {
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}上述就是小編為大家分享的使用JavaScript怎么獲取并修改CSS樣式了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
