设置/修改元素属性、设置/修改表单属性

180 阅读1分钟

1.dom元素.内置属性:如果没有赋值就是取值

2.操作样式

style:样式属性对象。它是一个对象,包含着当前元素所有可设置的样式属性,使用时通过 dom元素.style.样式 = 值。它的作用是设置行内样式

className:设置元素的类名,它会覆盖元素之前的类名样式

classList:当前元素的类样式列表

(1).add(class1, class2, ...):添加新样式,不会修改元素之前的类样式

如:add('car','pic')记得加引号

(2).remove(class1, class2, ...):移除样式

(3).toggle(class):切换样式

(4).contains:判断元素是否包含某个样式,包含返回true,不包含返回false

body>
  <button>添加一个字体大小样式</button>
  <button class="second">移除一个字体大小样式</button>
  <button>切换一个字体大小样式</button>
  <button>判断元素是否有某个样式</button>
  <p class="red">我是百变p元素</p>
  <script>
    // 获取元素
    let p = document.querySelector('p')

    //四种选取方式
    let btn1 = document.querySelector('button')
    let btn2 = document.querySelector('.second')
    let btn3 = document.querySelector('button:nth-of-type(3)')
    let btn4 = document.querySelectorAll('button')[3]

    // 单击事件
    btn1.addEventListener('click', function () {
      //classList.add:在已有的基础上新增一个新的样式类名,‘不影响’元素之前已有的样式
      // p.classList.add('新样式类名')
      //括号里面的类名不用再加.标记了,因为它只能对类名样式进行处理
      p.classList.add('size50', 'underline') //多样式就用逗号单独分隔开
    })

    btn2.addEventListener('click', function () {
      //classList.remove:移除指定名称样式,不影响元素其他的样式类名
      p.classList.remove('size50')
    })

    btn3.addEventListener('click', function () {
      //classList.toggle:切换元素的样式,如果没有就添加,如果有就移除
      p.classList.toggle('size50')
    })

    btn4.addEventListener('click', function () {
      //classList.contains:判断当前元素是否包含某个指定名称的样式,如果有就返回true,如果没有返回false
      let flag = p.classList.contains('size50')
      console.log(flag);
    })
  </script>
</body>

3.设置/修改表单属性 取值: DOM对象.属性名

赋值: DOM对象.属性名 = 新值

如果没有赋值就是取值,它的值是布尔值,特别对于checked属性,选中就是true,否则就是false

常见表单内置属性:value、disabled(是否禁止点击)、checked、selected

注意:textarea文本域要用value获取