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技术站
微信扫一扫 
支付宝扫一扫 