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);

结束,越来越糊弄了~

上一篇:黑马程序员:Java基础总结----类加载器


下一篇:Edraw安装图解