JavaScript學習（十五）—內部樣式與外部樣式的修改與設定
(一)、行內樣式
-
獲取方式：元素節點.style.CSS屬性名稱；
-
注意：如果CSS屬性中包含"-",那么需要采用駝峰命名法,如div.style.fontSize
-
設定樣式：元素節點.style.CSS屬性名稱=屬性值
-
注意：如果元素身上已經有了CSS屬性，那么表示修改，如果沒有表示添加
cssText屬性
- 作用：獲取行內樣式（指將style屬性后面的所有的行內樣式一字串的形式回傳），也可以用它來設定行內樣式，
- 獲取格式：元素節點.style.cssText=‘屬性名稱：屬性值；屬性名稱：屬性值…’
- 注意：如果CSS屬性中包含"-",那么不需要采用駝峰命名法,另外不需要設定的樣式采用默認值
（二）內部樣式與外部樣式的獲取
a)谷歌瀏覽器（除了降低版本IE）：window.getComputedStyle方法獲取
- 格式：window.getComputedStyle（元素節點，null）.CSS屬性名稱；
b) IE瀏覽器（IE8以及IE8以下的版本）：元素節點.currentStyle屬性名稱；
- 格式： 元素節點.currentStyle.CSS 屬性名稱；
（三）內部樣式與外部樣式的獲取
- 元素節點.style.CSS屬性名稱=屬性值
- 注意：如果元素身上已經有了CSS屬性，那么表示修改，如果沒有表示添加
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
color: red;
font-size: 100px;
}
</style>
</head>
<body>
<div id="box">hello </div>
<script>
//定義一個函式，功能是獲取內部外部樣式，可以在谷歌瀏覽器或者是IE瀏覽器下面都執行
function getStyle(ele, cssName) {
if (ele.currentStyle == undefined) {
//谷歌瀏覽器
return window.getComputedStyle(ele, null)[cssName];
} else {
return ele.currentStyle[cssName]
}
}
var div = document.getElementById('box');
var res = getStyle(div, 'font-size');
console.log(res);
//修改元素的文本顏色
div.style.color = 'blue';
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272895.html
標籤：其他
下一篇：解讀JavaScript迭代器