JavaScript进阶——操作元素属性

最新推荐文章于 2024-05-21 14:15:14 发布

热爱前端的小wen

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量754

点赞数 28

文章标签： javascript 前端 html css html5

本文链接：https://blog.csdn.net/m0_57184906/article/details/136851120

版权

2.2.1 通过 style 属性操作 CSS

2.2.2 操作类名（ className ）操作 CSS

2.2.3 通过 classList 操作类控制 CSS

1. 操作元素常用属性

1.1 介绍

可以通过 JS 设置／修改标签元素属性，比如通过 src 更换图片
最常见的属性比如： href 、 title 、 src 等

1.2 语法

对象．属性＝值

1.3 例子——修改图片对象的属性

<body>
  <img src = "./images/1.webp" alt = "">
  <script>
  //1．获取图片元素
  const img = document.querySelector('img')
  //2．修改图片对象的属性    对象．属性 = 值
  img.src = './images/2.webp'
  img.title = '花花老师的艺术照片'
  </script>
</body>

2.操作元素样式属性

2.1 介绍

可以通过 JS 设置／修改标签元素的样式属性。

通过轮播图小圆点自动更换颜色样式；

点击按钮可以滚动图片，这是移动的图片的位置 left 等等；

2.2 方式

2.2.1 通过 style 属性操作 CSS

语法：对象 . style . 样式属性＝值
例子：

注意：

a. 修改样式通过 style 属性引出；

b. 如果属性有﹣连接符，需要转换为小驼峰命名法；

c. 赋值的时候，需要的时候不要忘记加 css 单位；

<style>
  .box {
   width: 200px;
   height: 200px;
   background-color: pink;
  }
</style>

<body>
  <div class = "box"></div>
  <script>
    //1、获取元素
    const box = document.querySelector('.box')
    //2、修改样式属性   对象．style．样式属性＝'值'  别忘了跟单位
    box.style.width = '300px'
    //多组单词的采取小驼峰命名法
    box.style.backgroundColor = 'hotpink'
    box.style.border = '2px solid blue'
    box.style.borderTop = '2px solid red'
  </script>
</body >