web APIs基础-操作元素样式属性(一）

chengxu兔

已于 2024-04-06 21:20:01 修改

阅读量132

点赞数 4

文章标签：前端 javascript vue.js 开发语言

于 2024-03-26 12:19:19 首次发布

本文链接：https://blog.csdn.net/chengxutu/article/details/137042348

版权

可以通过JS设置/修改标签元素的样式属性
比如通过轮播图小圆点自动更换元素样式(要复习)
点击按钮可以滚动图片，这是移动图片的位置left等等
学习路径
- 通过stule属性操作CSS
- 操作类名（className）操作CSS
- 通过classList操作类控制CSS
通过style属性操作CSS
语法：
- 对象.style.样式属性=值
例：

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>操作元素样式属性</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // 1.获取元素
        // 这里注意用div的话用加点，但用box需要写.box
        const div=document.querySelector('.box')
        // 2.操作样式属性，对象.style.样式属性='值' 别忘了跟单位
        box.style.width='100px'
        // 多组词使用小驼峰命名法
        box.style.backgroundColor='pink'
        box.style.border='2px solid blue'
    </script>
</body>
</html>

特殊情况

body不需要获取直接document.body(页面里的body就行)
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切换背景图片</title>
    <style>
        body {
            background: url(./序号图片/img1.png) no-repeat top center;
        }
    </style>
</head>
<body>
    <script>
        function getRandom(N,M) {
            return Math.floor(Math.random()*(M-N+1))+N
        }
        let random=getRandom(1,4)
        document.body.style.background=`url('./序号图片/img${random}.png')`
    </script>
</body>
</html>