美文网首页工作生活
2. label+ckeckbox ~ for属性实现dom的显

2. label+ckeckbox ~ for属性实现dom的显

作者: chan_it | 来源:发表于2019-07-02 16:10 被阅读0次

例一:通过for跨元素控制元素的样式

只需要input的id属性匹配label的for属性即可。


图片.png

例二:通过for属性实现展开收起

思路:label相当于两个开关,input是一个灯泡。

  <style>
    .content{
      display: none;
    }
    input#abc:checked ~ .content{
      display: block;
    }
    .label2{
      display: none;
    }
    input#abc:checked ~ .label1{
      display: none;
    }
    input#abc:checked ~ .label2{
      display: block;
    }
  </style>

<body>
  <input type="checkbox" name="" id="abc" style="display: none;">
  <label class="label1" for="abc">展开</label>
  <label class="label2" for="abc">收起</label>
  <div class="content">
    label标签为 indivut 元素定义标注(标记)。
  </div>
</body>

注意:

  1. 被控制的元素样式尽量不要写行内样式,可能会造成切换时候的样式权重不够。
  2. 关联的的元素尽量写在同一个层级里面。
  3. 哪一个是开关,哪一个是灯泡,要分清楚。

相关文章

  • 2. label+ckeckbox ~ for属性实现dom的显

    例一:通过for跨元素控制元素的样式 只需要input的id属性匹配label的for属性即可。 例二:通过for...

  • 22

    一、访问元素的属性 A.核心Dom 1.获得属性值:getAttrbuite('属性名'); 2.设置属性...

  • js 17

    一、访问元素的属性 A.核心Dom 1.获得属性值:getAttrbuite('属性名'); 2.设置属性...

  • JavaScript17

    一、访问元素的属性 A.核心Dom 1.获得属性值:getAttrbuite('属性名'); 2.设置属性...

  • 2018-08-10

    一.访问元素的属性 A.核心Dom1.获得属性值: getAttrbuite('属性名');2.设置属性: set...

  • 2018-08-11

    一.访问元素的属性 A.核心Dom1.获得属性值: getAttrbuite('属性名');2.设置属性: set...

  • 2018.7.25

    一.访问元素的属性 A.核心Dom 1.获得属性值: getAttrbuite('属性名'); 2.设置属性: s...

  • 2018-08-18

    一.访问元素的属性 A.核心Dom1.获得属性值: getAttrbuite('属性名');2.设置属性: set...

  • 8.06

    一.访问元素的属性 A.核心Dom1.获得属性值: getAttrbuite('属性名');2.设置属性: set...

  • JS第十八天

    一.访问元素的属性 A.核心Dom1.获得属性值: getAttrbuite('属性名');2.设置属性: set...

网友评论

    本文标题:2. label+ckeckbox ~ for属性实现dom的显

    本文链接:https://www.haomeiwen.com/subject/vgnzcctx.html