One 获取style里的内容
<div id='box' style='width: 100px; height: 200px'></div>
<script>
var x = document.getElementById( 'box' );
alert( x.sytle );
</script>
1.png
获取得到的是css对象没办法得到里面的内容；
如果要得到内容 . 内容 → .width
alert( x.style.width );
2.png
以上是单个行内样式的获取；
如果是获取整个的呢；
cssText
alert( x.style.cssText );
3.png
这种方式只能获取行内样式的值
一般通过js是修改行内样式，如果修改内联样式跟外联样式还要考虑优先级；
修改行内样式
<div id='box' style='width: 100px;height: 200px '></div>
<script>
var x = document.getElementById( 'box' );
x.style.width = '200px';
</script>
4.png
注意：对于修改 border-top 有 — 的属性时候；
js里的 - 表示减→ 所以在js里要用 borderTop 来修改
<div id='box' style='width: 100px;height: 200px '></div>
<script>
var x = document.getElementById( 'box' );
x.style.border-top = '2px solid red'; 修改不了
</script>
5.png
<div id='box' style='width: 100px;height: 200px '></div>
<script>
var x = document.getElementById( 'box' );
x.style.borderTop = '2px solid red'; 通过borderTop来修改
</script>
6.png
<div id='box' style='width: 100px;height: 200px;background: red; '></div>
<script>
var x = document.getElementById( 'box' );
x.style.backgroundColor = 'greed';
</script>
一般修改背景颜色用backgroundColor，如果用background复合属性设置（万一有背景图片就会被覆盖）
多个属性一起设置：
<div id='box' style='width: 100px; height: 100px;'></div>
<script>
var oBox = document.getElementById( 'box' );
oBox.style.width = '200px';
oBox.style.height = '300px';
oBox.style.marginLeft = '100px';
oBox.style.backgroundColor = 'green';
</script>
综合写法：
<script>
var oBox = document.getElementById( 'box' );
oBox.style.cssText = 'width: 200px; height: 300px; margin-left: 100px;background-color: green;';
</script>
注意：cssText = ‘里面是字符串，跟行内样式写法一样’
7.png
以上方法会把 style 里全部换成 cssText 设置：
<div id='box'; style='width: 100px;height: 100px;margin-tip: 100px;';></div>
<script>
var oBox = document.getElementById( 'box' );
oBox.style.cssText = 'width: 200px; height: 300px; margin-left: 100px;background-color: green;';
</script>
8.png
原来的margin-top也会被替换掉；
用什么方法不会出现这样：
<div id='box'; style='width: 100px;height: 100px;margin-tip: 100px;';></div>
<script>
var oBox = document.getElementById( 'box' );
oBox.style.cssText += 'width: 200px; height: 300px; margin-left: 100px;background-color: green;';
</script>
9.png
+=会增加进入 一样会覆盖掉 不同的会加进
利用类名来操作样式
在内联样式中先定义好样式，利用js加进去；
→前提注意优先级问题\
<style>
.box2{
width: 200px;
height: 200px;
background: red;
}
</style>
<body>
<div id= 'box' ;></div>
<script>
var oBox = document.getElementById( 'box' );
oBox.className = 'box2';
</script>
</body>
Q10.png
js操作内联样式
获取：
<style id='hh' >
#box{
width: 200px;
height: 200px;
background: red;
}
</style>
<body>
<div id='box' ></div>
<script>
var sHh = document.getElementById ( 'hh' ) ;
alert ( sHh.innerHTML ) ;
</script>
</body>
11.png
设置
语法：Obj . innerHTML = ' css样式 '; css样式写法跟我们内联样式写法一样
<script>
sHh.innerHTML = '#box{width: 400px;height: 400px;background-color: green;}';
<script>
12.png
