前端开发之html属性style对象获取和设置行内样式

1.html属性style属性设置

style是一个对象，只能获取行内样式(写在一行中)，不能获取内嵌的样式(写在head的style中)和外链的样式(写在css文件中)

相当于在html中设置css:  只适用于简短的属性设置

 

---

通过 js 读取元素的样式

语法：（方式一）

    元素.style.样式名

备注：我们通过style属性读取的样式都是行内样式。

语法：（方式二）

    元素.style["属性"];  //格式

    box.style["width"];  //举例

方式二最大的优点是：可以给属性传递参数。

# 通过 js 设置元素的样式

语法：

    元素.style.样式名 = 样式值;

举例：

    box1.style.width = "300px";
    box1.style.backgroundColor = "red"; // 驼峰命名法

备注：我们通过style属性设置的样式都是行内样式，而行内样式有较高的优先级。但是如果在样式中的其他地方写了!important，则此时!important会有更高的优先级。

---

style属性需要注意以下几点：

（1）样式少的时候使用。

（2）style是对象。我们在上方已经打印出来，typeof的结果是Object。

（3）值是字符串，没有设置值是“”。

（4）命名规则，驼峰命名。

（5）只能获取行内样式，和内嵌和外链无关。

（6）box.style.cssText = “字符串形式的样式”。

cssText这个属性，其实就是把行内样式里面的值当做字符串来对待。在上方代码的基础之上，举例：

打印结果：

---

style的常用属性

style的常用属性包括：

• backgroundColor

• backgroundImage

• color

• width

• height

• border

• opacity 设置透明度 (IE8以前是filter: alpha(opacity=xx))

注意DOM对象style的属性和标签中style内的值不一样，因为在JS中，-不能作为标识符。比如：

• DOM中：backgroundColor

• CSS中：background-color

---

具体例子应用实现:style的例子实现在中间开始