【前端大概一分钟】日常总结(一)

1. all属性重置元素样式

a {
    all: unset;
}
复制代码

all : initial 改变该元素或其父元素的所有属性至初始值
all : inherit 改变该元素或其父元素的所有属性的值至他们的父元素属性的值
all: unset 如果该元素的属性的值是可继承的,则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值,反之改变为初始值

2. pointer-events属性指定鼠标事件的 target

a {
    pointer-events: none;
}
复制代码

pointer-events: none 元素永远不会成为鼠标事件的target(即无法响应点击事件,但是状态不是disabled)
... 更多属性查阅 MDN

3.冷门伪类

  • :target 代表一个ID与当前URL片段匹配的页面元素
    根据地址hash值动态配置元素,常用于hash导航
    // html 结构
    <a href="#one">First</a>
    <a href="#two">Second</a>
    <a href="#three">Third</a>
    <div id="one">one</div>
    <div id="two">two</div>
    <div id="three">three</div>
    // css 样式
    <style>
      :target {
           color: red;
      }
    </style>
    复制代码
  • :root 表示 <html> 元素
    在声明全局 CSS 变量时 :root 会很有用
    :root { 
         --main-color: hotpink;
         --pane-padding: 5px 42px;
     }
    复制代码
  • :focus-with 表示一个元素或该元素的后代元素获得焦点
    常用于<form> 表单获得焦点
    form:focus-within {
        background: #ff8;
        color: black;
    }
    复制代码

4. event.stopImmediatePropagation( )

不仅会停止冒泡,而且不会触发元素stopImmediatePropagation后面绑定的事件
<script>
        document.querySelector("p").addEventListener("click", function(event)
        {
            alert("我是p元素上被绑定的第一个监听函数");
        }, false);
        document.querySelector("p").addEventListener("click", function(event)
        {
            alert("我是p元素上被绑定的第二个监听函数");
            event.stopImmediatePropagation();
            //执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
        }, false);
        document.querySelector("p").addEventListener("click", function(event)
        {
            alert("我是p元素上被绑定的第三个监听函数");
            //该监听函数排在上个函数后面,该函数不会被执行.
        }, false);
        document.querySelector("div").addEventListener("click", function(event)
        {
            alert("我是div元素,我是p元素的上层元素");
            //p元素的click事件没有向上冒泡,该函数不会被执行.
        }, false);
</script>
复制代码

5. 输入框验证,错误的字符将不会输入

通过keypress事件的evt.charCode做字符判断,错误的字符使用evt.preventDefault()取消输入

  <p>请输入一些字母,只允许小写字母.</p>
  <form>
      <input type="text" id="my-textbox"/>
  </form>
  <script type="text/javascript">
      function checkName(evt) {
          var charCode = evt.charCode;
          if (charCode != 0) {
              if (charCode < 97 || charCode > 122) {
                  evt.preventDefault();
                  alert("只能输入小写字母." + "\n"
                  + "charCode: " + charCode + "\n"
              );
              }
          }
      }
      document.getElementById('my-textbox').addEventListener(
          'keypress', checkName, false
      );
  </script>
复制代码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值