JS样式操作属性

最新推荐文章于 2024-05-21 14:15:14 发布

幻墨如烟u

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量81

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/sjs1766349405/article/details/120614289

版权

笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

常用方式

方式：通过操作style属性

元素对象的style属性也是一个对象！

元素对象.style.样式属性 = 值;

<body>
    <div></div>
    <script>
        // 1. 获取元素
        var div = document.querySelector('div');
        // 2. 注册事件 处理程序
        div.onclick = function() {
            // div.style里面的属性 采取驼峰命名法 
            this.style.backgroundColor = 'purple';
            this.style.width = '250px';
        }
    </script>
</body>

案例：点击和关闭案例

<style>
      #box {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 30px;
      }
</style>

<button id="btn">点击</button>
<div id="box">111</div>

<script>
      var btn = document.getElementById("btn");
      var box = document.getElementById("box");
      var flag = 0;
      btn.onclick = function() {
        if (flag == 0) {
          box.style.display = "none";
          flag = 1;
        } else {
          box.style.display = "block";
          flag = 0;
        }
      };
</script>

全选和反选

<input type="checkbox" id="checkAll" />全选
    <input type="checkbox" class="inp" />
    <input type="checkbox" class="inp" />
    <input type="checkbox" class="inp" />
    <input type="checkbox" class="inp" />
<script>
      var checkAll = document.getElementById("checkAll");
      var check = document.querySelectorAll(".inp");
      checkAll.onchange = function() {
        if (this.checked == true) {
          for (var i = 0; i < check.length; i++) {
            check[i].checked = true;
          }
        } else {
          for (var i = 0; i < check.length; i++) {
            check[i].checked = false;
          }
        }
      };

</script>

幻墨如烟u

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS样式操作属性

常用方式方式：通过操作style属性元素对象的style属性也是一个对象！元素对象.style.样式属性 = 值;<body> <div></div> <script> // 1. 获取元素 var div = document.querySelector('div'); // 2. 注册事件处理程序 div.onclick = function() {
复制链接

扫一扫