Web APIs操作元素属性 | 前端笔记（十二）-CSDN博客

本文链接：https://blog.csdn.net/weixin_55901142/article/details/130423517

4.操作元素属性

（1）操作元素常用属性

语法：对象.属性 = 值

const img = document.querySelector('img')
img.src = './images/2.webp'

（2）操作元素样式属性

1.通过style属性

语法：对象.style.样式属性 = 值

const box = document.querySelector('.box')
//修改样式属性 对象.style.样式属性 = '值'  后面跟字符串，别忘了跟单位
box.style.width = '300px'
// 多组单词的采取 小驼峰命名法
box.style.backgroundColor = 'hotpink'       //background-color
box.style.borderTop='2px solid blue'        //可以添加样式

备注：body是唯一的标签，所以可以直接写 document.body.style。

2.通过操作类名(className)

语法：元素.className='类名'

  <style>
    div {
      width: 200px;
      height: 200px;
    }
    .nav {
      color: red;
    }
    .box {
      width: 300px;
      height: 300px;
      background-color: skyblue;
    }
  </style>

<body>
  <div class="nav">123</div>
  <script>
    const div = document.querySelector('div')
    // 2.添加类名  class 是个关键字 我们用 className
    div.className = 'box'  //.box会覆盖.nav,所以如果要保留.nav，即div.className = 'nav box'
  </script>
</body>

3.通过 classList 操作类

语法：

1.追加类 add( ) //类名不加点，并且是字符串

元素.classList.add('类名')

2.删除类 remove( ) //类名不加点，并且是字符串

元素.classList.remove('类名')

3.切换类 toggle( ) //有还是没有啊，有就删掉，没有就加上

元素.classList.toggle('类名')

  <style>
    .box {
      width: 200px;
    }

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

<body>
  <div class="box active">文字</div>
  <script>
    const box = document.querySelector('.box')
    box.classList.add('active')
    box.classList.remove('box')
    box.classList.toggle('active')
  </script>
</body>

（3）操作表单元素属性

获取：DOM对象.属性名

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

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

<body>
  <input type="text" value="电脑">
  <input type="checkbox" name="" id="">
  <button>点击</button>
  <script>
       const uname = document.querySelector('input')
    //2. 获取值  获取表单里面的值 用的  表单.value
       console.log(uname.value) 
    //3. 设置表单的值
       uname.value = '我要买电脑'
       console.log(uname.type)
       uname.type = 'password'

    const ipt = document.querySelector('input')
    console.log(ipt.checked)  // false   只接受布尔值
    ipt.checked = true

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

  </script>
</body>

（4）自定义属性

自定义属性：以data-开头的属性，在DOM对象上一律以dataset对象方式获取。

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

（5）间歇函数

间歇函数： setInterval，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。

语法：setInterval(函数, 间隔时间)

备注：

1.每隔一段时间调用这个函数，时间单位为毫秒。

2.定时器返回的是一个id数字。

关闭定时器：

let 变量名 = setInterval(函数名, 间隔时间)

clearInterval(变量名)

    function fn() {
      console.log('一秒执行一次')
    }
    // setInterval(函数名, 间隔时间)  函数名不要加小括号
    setInterval(fn, 1000)
    let n = setInterval(fn, 1000)
    console.log(n)    //2   //定时器返回的是一个id数字
    // 关闭定时器
    clearInterval(n)