【前端大概一分钟】日常总结（一）

xiaoshitou
168 阅读2分钟

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>
avatar
文章
阅读
粉丝