二阶段JavaScript-Day11知识点整理(深入DOM操作)_js点击关灯,整个背景变黑,再次点击开灯,整个背景恢复原样 b、点击测试,按钮时按钮-CSDN博客

本文链接：https://blog.csdn.net/qq_44153295/article/details/121903361

1.DOM操作之innerHTML

//设置内容
//针对非表单控件
//支持标签。可以解析标签
tianIn.innerHTML//获取内容
tianIn.innerHTML = "<b></b>";//设置内容

//不支持标签，可以解析标签
tianIn.innerText//获取内容
tianIn.innerText = "";//设置内容

//针对表单控件
tianIn.value//获取内容
tianIn.value = "";//设置内容

2.DOM操作之自定义属性

属性分为自定义属性和固有属性。

自定义属性：自己定义的属性（定义的可以是自己命名的，也可以是与生俱来的属性，如：src，type，href…）

//设置自定义属性,setAttribute('属性名','属性值')
tianIn.setAttribute('xx', 'yy');

//获取属性
tianIn.getAttribute('xx');

//删除属性
tianIn.removeAttribute('xx');

固有属性：src，type，href，checked

//checked: js控制复选框的选中（true）和取消选中（false）。
//设置固有属性
oImg.src = '路径';
oInput.checked = true;

//获取固有属性
oImg.src
oInput.checked

3.开关灯

原背景黑色。

第一次点击按钮，背景变白色，按钮变为关灯。

第二次点击按钮，背景再次变黑色，按钮变为开灯。

如此循环反复。

通过flag来控制，每次点击，让flag的值取反。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>开关灯</title>
  <style>
    body{
      background: black;
    }
  </style>
</head>
<body>
  <button>开灯</button>
</body>
</html>
<script>

  var btn = document.querySelector('button');
  var body2 = document.body;
  var flag = false;

  btn.addEventListener('click',change);

  function change(){
    flag = !flag;
    if(flag){
      body2.style.background = 'white';
      btn.innerHTML = '关灯';
    }
    else{
      body2.style.background = 'black';
      btn.innerHTML = '开灯';
    }
  }
</script>