內(nèi)聯(lián)樣式的獲取和修改
獲取元素的內(nèi)聯(lián)樣式：
語法：元素.style.樣式名
注意：通過style屬性設(shè)置和讀取的都是內(nèi)聯(lián)樣式，無法讀取樣式表中的樣式。修改元素的內(nèi)聯(lián)樣式：
語法：元素.style.樣式名 = 樣式值
比如：
box.style.width = "120px";
box.style.backgroundColor = "yellow";注意：
1、如果CSS的樣式名中含有-，這種名稱在JS中是不合法的，會被認為是運算符-，因此，需要將這種樣式名修改為駝峰命名法，去掉-，然后將-后的字母大寫。
2、內(nèi)聯(lián)樣式有較高的優(yōu)先級，所以通過JS修改的樣式往往會立即顯示，但是如果在樣式中寫了!important,則此時樣式會有最高的優(yōu)先級，即使通過JS也不能覆蓋該樣式，此時將會導致JS修改樣式失效，所以盡量不要為樣式添加!impoerant。
獲取元素當前顯示的樣式
方案1：
對象方法：getComputedStyle(參數(shù)1，參數(shù)2)；
參數(shù)1:要獲取樣式的元素
參數(shù)2:可以傳遞一個偽元素，一般都傳null
比如：
var obj = getComputedStyle(box1，null)；
alert(obj.width);
相當于：
alert(getComputedStyle(box1，null).width);注意：
1、使用該方法時會返回一個對象，對象中封裝了當前元素對應(yīng)的樣式，可以通過對象.樣式名讀取樣式。如果獲取的樣式?jīng)]有設(shè)置，則會獲取到當前樣式真實的值，而不是默認值。比如：沒有設(shè)置width，它不會獲取到auto，而是一個長度的具體值。
2、該方法是window對象的方法，和document一樣可以直接使用。
3、該方法只讀，不能修改元素樣式的屬性。
4、該方法在IE9以上及其他的瀏覽器都支持。
方案二：
語法：元素.currentStyle.樣式名注意：
1、如果當前元素沒有設(shè)置樣式，則獲取它的默認值。比如：backgroundColor沒有設(shè)置顏色，這顯示默認值:transparent。
2、該屬性只讀，不能修改元素樣式的屬性。
3、currentStyle只有IE8及以下版本瀏覽器支持，IE9以上及其他的瀏覽器都不支持。
如何解決瀏覽器兼容性問題
定義一個函數(shù)，用來獲取指定元素的當前的樣式。
參數(shù)： obj 要獲取樣式的元素
? ? ? name 要獲取的樣式名
function getStyle(obj, name) {
if (window.getComputedStyle) {
return getComputedStyle(obj, null)[name];
}
else {
return obj.currentStyle[name];
}
}示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>操作內(nèi)聯(lián)樣式、獲取當前樣式</title>
</head>
<style>
.box {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script>
window.onload = function () {
var before_setStyle = document.getElementById("before_setStyle");
var click_setStyle = document.getElementById("click_setStyle");
var after_setStyle = document.getElementById("after_setStyle");
var box = document.getElementsByClassName("box")[0];
var boxStyle = getComputedStyle(box, null);
function setStyle() {
box.style.width = "120px";
box.style.height = "100px";
box.style.backgroundColor = "yellow";
}
before_setStyle.onclick = function () {
alert(
"設(shè)置樣式前，圖片寬度為：" + boxStyle.width + "\n" +
"設(shè)置樣式前，圖片高度為：" + boxStyle.height + "\n" +
"設(shè)置樣式前，圖片顏色為：" + boxStyle.backgroundColor + "\n"
);
}
click_setStyle.onclick = function () {
setStyle();
}
after_setStyle.onclick = function () {
alert(
"設(shè)置樣式后，圖片寬度為：" + boxStyle.width + "\n" +
"設(shè)置樣式后，圖片高度為：" + boxStyle.height + "\n" +
"設(shè)置樣式后，圖片顏色為：" + boxStyle.backgroundColor + "\n"
);
}
}
</script>
<body>
<div class="box" style="width:110px;height:90px;background:green"></div>
<br>
<button id="before_setStyle">設(shè)置樣式前圖片參數(shù)：</button>
<br>
<button id="click_setStyle">點擊設(shè)置樣式</button>
<br>
<button id="after_setStyle">設(shè)置樣式后圖片參數(shù)：</button>
</body>
</html>
文章來源：http://www.zghlxwxcb.cn/news/detail-801669.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-801669.html
到了這里，關(guān)于JavaScript基礎(chǔ)(27)_內(nèi)聯(lián)樣式的獲取和修改、獲取元素當前顯示的樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
