JaveScript基础5 操作css样式

One 获取style里的内容

1.png

获取得到的是css对象没办法得到里面的内容；
如果要得到内容 . 内容 → .width

  alert( x.style.width );

2.png

以上是单个行内样式的获取；

如果是获取整个的呢；

cssText

 alert( x.style.cssText );

3.png

这种方式只能获取行内样式的值
一般通过js是修改行内样式，如果修改内联样式跟外联样式还要考虑优先级；

---

修改行内样式

4.png

注意：对于修改 border-top 有 — 的属性时候；
        js里的 - 表示减→ 所以在js里要用 borderTop 来修改

5.png

6.png

一般修改背景颜色用backgroundColor，如果用background复合属性设置（万一有背景图片就会被覆盖）

多个属性一起设置：

综合写法：

注意：cssText = ‘里面是字符串，跟行内样式写法一样’

7.png

以上方法会把 style 里全部换成 cssText 设置：

8.png

原来的margin-top也会被替换掉；
用什么方法不会出现这样：

9.png

+=会增加进入   一样会覆盖掉    不同的会加进

---

利用类名来操作样式

在内联样式中先定义好样式，利用js加进去；
→前提注意优先级问题\

Q10.png

---

js操作内联样式

获取：

弹出标签style里的所有css样式

11.png

设置

语法：Obj . innerHTML = ' css样式 '; css样式写法跟我们内联样式写法一样