六、读写样式属性、操作伪元素、元素运动初探

最新推荐文章于 2023-06-30 15:46:34 发布

布白whitenot1

最新推荐文章于 2023-06-30 15:46:34 发布

阅读量710

点赞数

分类专栏： DOM基础学习笔记文章标签： css 前端 javascript dom

本文链接：https://blog.csdn.net/weixin_44683942/article/details/122831495

版权

六、读写样式属性、操作伪元素、元素运动初探

一、读写样式属性

1.1 element.style.xxx

DOM无法直接操作CSS样式表，而是通过操作标签上的style属性来修改/访问样式。

DOM动态设置行内样式的特点：

属性值可读可写。
多个单词属性名使用小驼峰形式。
属性值的写法必须为字符串。
复合值一定要拆解赋值，利于排除错误。
保留字前加css。

<style type="text/css">
    .box {
     
      width: 200px;
    }
</style>
<body>
  <div class="box"></div>
  <script type="text/javascript">
    var oDive = document.getElementsByTagName('div')[0];
    // DOM间接操作CSS
    // 值的写法必须是字符串
    oDive.style.width = '100px'; 
    oDive.style.height = '100px';
    // 多个单词属性名使用小驼峰形式书写
    oDive.style.backgroundColor = 'red';
    // ※复合值要分开书写
    oDive.style.borderWidth = '2px';
    oDive.style.borderStyle = 'solid';
    oDive.style.borderColor = '#000';
    // oDive.style.borderColor = 'black';
    // oDive.style.borderColor = 'rgba(0,0,0,0.2)';
    oDive.style.position = 'absolute';
    oDive.style.left = '100px';
    oDive.style.top = '100px';
    // 保留字前面加css
    oDive.style.cssFloat = 'left';
  </script>
</body>

读写样式属性

注：element.style.xxx并没有直接修改内部css样式表，而是在标签的style属性上添加了css样式，而行内css样式的优先级更高。

通过element.style可以查看元素所有能够设置样式的属性名集合（类数组）：

访问所有样式属性

1.2 ※window.getComputedStyle(elem,null)获取元素所有CSS计算属性值

Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。

（返回元素的所有计算样式集合组成的对象），通过它可获得元素的所有CSS属性的值。

IE8及以下不支持
E8及以下支持elem.currentStyle->有些浏览器不支持该方法
企业中 获取元素宽高（width/height）的兼容性 写法：

<style type="text/css">
    .box {
     
      width: 200px;
      height: 200px;
      background-color: green;
    }
</style>
<div class="box"></div>
<script type="text/javascript">
    var oDiv = document.

最低0.47元/天解锁文章

布白whitenot1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
六、读写样式属性、操作伪元素、元素运动初探

六、读写样式属性、操作伪元素、元素运动初探一、读写样式属性1.1 element.style.xxxDOM无法直接操作CSS样式表，而是通过操作标签上的style属性来修改/访问样式。DOM动态设置行内样式的特点：属性值可读可写。多个单词属性名使用小驼峰形式。属性值的写法必须为字符串。复合值一定要拆解赋值，利于排除错误。保留字前加css。<style type="text/css"> .box { width: 200px; }</st
复制链接

扫一扫