JavaScript 获取和修改 内联样式

JavaScript 获取和修改 内联样式

　　版权声明：未经授权，严禁转载分享！　　

---

元素的样式

　　HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象。

　　Style 属性中的 CSS 样式属性，都是 style 对象的属性。

　　可通过 . 运算符获取和设置样式属性的值。

　　 获取或设置元素的内联样式：

　　　　- 获取：elem.style.属性名

　　　　- 设置：elem.style.属性名 = "值"

　　

　　去横线变驼峰！

　　获取到的和要设置的都是字符串类型。

案例代码

    <h2 id="t1" style="width:300px;line-height:40px;">标题一</h2>
 
    <script>
    var t1=document.getElementById("t1");
    // console.log(t1.style);
 
    //获取
    console.log(t1.style.width);
    console.log(t1.style.lineHeight);//去横线变驼峰
 
    //设置
    t1.style.width="50%";
    t1.style.height="100px";</script>

---

JS 还可以获得最终影响到当前元素的所有样式 —— 计算后的样式

　　方式：

　　　　- 获得计算后的样式对象：var style = getComputedStyle(elem);

　　　　- 从 style 对象中提取想要的 css 属性值：var fontSize = style.fontSize;

　　计算后的样式为绝对单位值。

　　计算后的样式都是只读的，不可以修改！

案例代码

 //获得计算后的样式
    var style=getComputedStyle(t1);
    // console.log(style);
    console.log(style.color);
    console.log(style.fontSize);
    console.log(style.width);
    console.log(style.border);
    console.log(style.borderTop);
    console.log(style.borderTopWidth);

结束，越来越糊弄了~