API-操作元素属性

雪碧bibi是我的好大二

于 2024-06-19 11:38:36 发布

阅读量435

点赞数 7

分类专栏： Web API 文章标签： css css3 前端 javascript

本文链接：https://blog.csdn.net/m0_64105917/article/details/139796417

版权

Web API 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习目标：

掌握操作元素属性

学习内容：

操作元素常用属性
操作元素样式属性
操作表单元素属性
自定义属性

操作元素常用属性：

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

对象.属性 = 值

 <title>修改元素常见属性</title>
</head>

<body>
  <img src="img/oldman.jpg" alt="">
  <script>
    //1.获取图片元素
    const img = document.querySelector('img')
    //2.修改图片对象的属性  对象.属性 = 值
    img.src = 'img/t2.jpg'
    img.title = '雪碧宝宝很可爱'

  </script>

</body>

练习

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习-页面刷新，图片随机更换</title>
</head>

<body>
  <img src="img/1.oldman.jpg" alt="">
  <script>
    // 取到N~M的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    //1.获取图片对象
    const img = document.querySelector('img')
    //2.随机得到序号
    const random = getRandom(1, 6)
    //3.更换路径
    img.src = `img/${random}.oldman.jpg`
  </script>

</body>

</html>

操作元素样式属性：

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

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

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

通过style属性操作CSS

对象.style.样式属性 = '值'

<title>通过style属性修改样式</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<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>

练习

<!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(img/1.oldman.jpg) no-repeat top center/cover;
    }
  </style>
</head>

<body>
  <script>
    // console.log(document.body)
    // 取到N~M的随机整数
    function getRandom(N, M) {
      return Math.floor(Math.random() * (M - N + 1)) + N
    }
    //随机数
    const random = getRandom(1, 6)
    document.body.style.backgroundImage = `url(img/${random}.oldman.jpg)`
  </script>

</body>

</html>

操作类名className操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

//active  是一个css类名
 元素.className = 'active'

注意：

由于class是关键字，所以使用className去代替。
className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名。
使用className可以同时修改多个样式。
直接使用className赋值会覆盖以前的类名。

<title>通过类名修改样式</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
    }

    .nav {
      color: red;
    }

    .box {
      width: 300px;
      height: 300px;
      background-color: skyblue;
      margin: 100px auto;
      padding: 10px;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <div class="nav"></div>
  <script>
    //1.获取元素
    const div = document.querySelector('div')
    //2.添加类名  class 是个关键字  我们用className
    div.className = 'nav box'
  </script>

</body>

通过classList操作类控制CSS

为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名。

classList是追加和删除不影响以前类名。

    //2.1追加类 add()
     元素.classList.add('类名')

    //2.2删除类  remove() 
     元素.classList.remove('类名')

    //2.3 切换类 toggle()
    元素.classList.toggle('类名')

<title>通过classList修改样式</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      color: #333;
    }

    .active {
      color: red;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box">文字</div>
  <script>
    //通过classList添加
    //1.获取元素
    const box = document.querySelector('.box')
    //2.修改样式

    //2.1追加类 add() 类名不加点，并且是字符串
    // box.classList.add('active')

    //2.2删除类  remove() 类名不加点，并且是字符串
    // box.classList.remove('box')

    //2.3 切换类 toggle() 有还是没有啊 ， 有就删掉  ，没有就加上
    box.classList.toggle('active')
  </script>

</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>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer.toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer.toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, .1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer.toggle button:hover {
      background: rgba(255, 255, 255, .2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="img/1.oldman.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>对人类来说会不会太超前了？</p>
      <ul class="slider-indicator">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">
          << /button>
            <button class="next">></button>
      </div>
    </div>
  </div>
  <script>
    // const arr = [1, 3]
    // arr[0]
    // 1. 初始数据
    const sliderData = [
      { url: 'img/1.oldman.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: 'img/2.oldman.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: 'img/3.oldman.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },
      { url: 'img/4.oldman.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: 'img/5.oldman.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: 'img/6.oldman.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: 'img/7.oldman.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]


    // 1. 需要一个随机数 
    const random = parseInt(Math.random() * sliderData.length)
    // console.log(sliderData[random])
    // 2. 把对应的数据渲染到标签里面
    // 2.1 获取图片
    const img = document.querySelector('.slider-wrapper img')
    // 2.2. 修改图片路径  =  对象.url
    img.src = sliderData[random].url
    // 3. 把p里面的文字内容更换
    // 3.1 获取p
    const p = document.querySelector('.slider-footer p')
    // 3.2修改p
    p.innerHTML = sliderData[random].title
    // 4. 修改背景颜色
    const footer = document.querySelector('.slider-footer')
    footer.style.backgroundColor = sliderData[random].color
    // 5. 小圆点
    const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
    // 让当前这个小li 添加 active这个类
    li.classList.add('active')
  </script>

</body>

</html>

操作表单元素属性：

表单很多情况，需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框。
正常的有属性有取值的，跟其他的标签属性没有任何区别。

获取：DOM对象.属性名
设置：DOM对象.属性名 = 新值

表单.value = '用户名'
表单.type = 'password'

 <title>修改表单属性</title>
</head>

<body>
   <input type="text" value="雪碧">
  <script>
    //1.获取元素
    const uname = document.querySelector('input')
    //2.获取值   获取表单里面的值   用的 表单.value
    // console.log(uname.value)  //雪碧
    // console.log(uname.innerHTML)  //innerHTML  得不到表单的内容
    //3.设置表单的值
    // uname.value = '雪碧宝宝想吃罐头'
    //console.log(uname.type)
    uname.type = 'password'

  </script> 
</body>

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示。如果为true代表添加了该属性，如果是false代表移除了该属性。
比如：disabled、checked、selected。

 <title>修改表单属性</title>
</head>

<body>
<input type="checkbox" name="" id="">
  <button disabled>点击</button>
  <script>
    //1.获取
    const ipt = document.querySelector('input')
    // console.log(ipt.checked) //false  只接受布尔值
    ipt.checked = true
    //  ipt.checked = 'true' //会选中 ，不提倡  有隐式转换

    //1.获取
    const button = document.querySelector('button')
    // console.log(button.disabled) // 默认false  不禁用
    button.disabled = true  //禁用按钮


  </script>

</body>

自定义属性：

标准属性：标签天生自带的属性，比如class、id、title等，可以直接使用点语法操作，比如：disabled、checked、selected。
自定义属性

在html5中推出来专门的data-自定义属性。
在标签上一律以data-开头。
在DOM对象上一律以dataset对象方式获取。

 <title>自定义属性</title>
</head>

<body>
  <!-- div{$}*5 -->
  <div data-id="1" data-spm="不知道">1</div>
  <div data-id="2">2</div>
  <div data-id="3">3</div>
  <div data-id="4">4</div>
  <div data-id="5">5</div>
  <script>
    const one = document.querySelector('div')
    console.log(one.dataset.id) // 1
    console.log(one.dataset.spm) //不知道

  </script>

  <body>