js 设置css的定位

JavaScript 可以通过修改 CSS 样式来控制页面元素的定位。以下是设置 CSS 定位属性的详细攻略以及两个示例：

设置 CSS 定位属性

要设置元素的 CSS 定位属性，需要用到该元素的 style 属性，并设置 position 属性的值。position 属性可以设置为以下四个值：

static：默认值，元素在文档流中，不进行定位。
relative：相对定位，元素在原本位置基础上进行定位，并不会影响其他元素的位置。
absolute：绝对定位，元素位于其最近的非 static 祖先元素中定位，并且通过 top、left、right 和 bottom 属性来指定元素的精确位置。
fixed：固定定位，元素相对于浏览器窗口定位，并且始终位于相同的位置，即窗口滚动时元素不会移动。

示例1：将元素相对定位

<!DOCTYPE html>
<html>
  <head>
    <style>
      .relative {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="relative">相对定位的 div 元素</div>
    <script>
      let divElement = document.querySelector('.relative')
      divElement.style.position = 'relative'
      divElement.style.left = '50px'
      divElement.style.top = '50px'
    </script>
  </body>
</html>

解析：

HTML 中定义了一个具有样式的 div。
在 script 标签中通过 document.querySelector 方法获取指定元素。
通过 element.style 对象的 position、left 和 top 属性将元素变为相对定位，并相对自身位置向右下方移动 50px。

示例2：将元素绝对定位，并相对于父级元素移动

<!DOCTYPE html>
<html>
  <head>
    <style>
      .wrapper {
        position: relative;
        width: 300px;
        height: 300px;
        background-color: gray;
      }

      .absolute {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="absolute">绝对定位的 div 元素</div>
    </div>
    <script>
      let parentElement = document.querySelector('.wrapper')
      let childElement = document.querySelector('.absolute')

      childElement.style.top = '50px'
      childElement.style.left = '50px'
    </script>
  </body>
</html>

解析：

HTML 中定义了一个具有样式的 div。wrapper 具有相对定位，absolute 具有绝对定位。
在 script 标签中通过 document.querySelector 方法获取指定元素。
通过 element.style 对象的 top 和 left 属性将 absolute 元素相对于其父元素向右下方移动 50px。由于 wrapper 具有相对定位，absolute 使用相对于父元素的坐标进行定位。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js 设置css的定位 - Python技术站

设置 CSS 定位属性

相关文章