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

chengxu兔

已于 2024-04-06 21:19:06 修改

阅读量406

点赞数 3

文章标签：前端 javascript

于 2024-04-06 20:47:10 首次发布

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

版权

本文介绍了如何通过类名操作CSS，包括使用`className`替换关键字、利用`classList`进行类的追加、删除和切换。同时讲解了如何在JavaScript中修改表单元素的属性，如`value`和`type`，以及表单属性如`disabled`和`checked`的布尔值控制。

摘要由CSDN通过智能技术生成

操作类名（className）操作CSS
- 如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于CSS类名的形式

语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过类名操作CSS</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        .div {
            border: 1px solid blue;
        }
        .box {
            width: 100px;
            height: 200px;
            background-color: brown;
            margin: 100px auto;
            padding: 10px;
            border: 9px solid red;
        }
    </style>
</head>
<body>
    <div class="div"></div>
    <script>
        // 1.获取元素
        const div=document.querySelector('div')
        // 2.添加类名 class 是个关键字 我们用calssName
        div.className='box'
    </script>
</body>
</html>

注意:
- 由于class是关键字，所以使用className去代替
- className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

通过classList操作类控制CSS

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

例：

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>通过classList修改样式</title>
      <style>
          .box {
              width: 300px;
              height: 300px;
              color:burlywood;
          }
          .box1 {
              color:cornflowerblue;
              background-color: burlywood;
          }
      </style>
  </head>
  <body>
      <div class="box">测试文字</div>
      <script>
          // 通过classList添加
          // 1.获取元素
          const box=document.querySelector('.box')
          // 2.修改样式
          // 2.1追加类add(),类名不加点，并且是字符串
          box.classList.add('box1')
          // 2.2删除类 remove() 类名不加点，并且是字符串
          box.classList.remove('box1')
          // 2.3切换类 toggle() 有还是没有啊，有就删掉，没有就加上
          box.classList.toggle('box1')
      </script>
  </body>
  </html>

操作表单元素（属性）
- 表单有很多情况，也需要修改属性，比如点击眼睛，可以看到密码，就是把表单类型转换为文本框
- 正常的有属性有取值的，跟其他的标签属性没有任何区别
- 获取：DOM对象.属性名
- 设置：DOM对象.属性名='新值'

<body>
    <input type="text" value="电脑">
    <script>
        // 1.获取元素
        const uname=document.querySelector('input')
        console.log(uname.value)//电脑
        console.log(uname.innerHTML)//得不到表单内容
        // 3.设置表单的值
        uname.value='我要买电脑'
        uname.type='password'
    </script>
  </body>