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>
