每日思考(2020/09/02)

题目概览

  • Doctype文档类型
  • 如何更改placeholder的字体颜色和大小
  • 如何给li绑定事件(ul下有1000+个li

题目解答

Doctype文档类型

  • DOCTYPE声明指定了浏览器对于HTML文档解析的类型;

  • HTML5DOCTYPE只有一种

    <!DOCTYPE html>
    
  • HTML4.01DOCTYPE有三种:StrictTransitionalFrameset

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    
  • 参考文档:HTML <!DOCTYPE> 标签

如何更改placeholder的字体颜色和大小

  • 可以通过各个浏览器的特定伪元素或伪类来设置placeholder的样式

    <style>
        /* Chrome浏览器 */
        input::-webkit-input-placeholder {
          color: red;
        }
    
        /* 火狐浏览器 */
        input::-moz-placeholder {
          color: red;
        }
    
        /* IE */
        input:-ms-input-placeholder {
          color: red;
        }
      </style>
    <body>
      <input type="text" placeholder="你好">
    </body>
    
  • 参考文档:伪元素表单控件默认样式重置与自定义大全 « 张鑫旭-鑫空间-鑫生活

如何给li绑定事件(ul下有1000+li

  • 在不考虑任何情况时,直接使用 $('li').addEventListener(event, fun) 就可以对 li 进行事件绑定

  • 当子元素过多时,可以利用“事件冒泡”在 ul 上进行绑定,实现事件委托。可以利用 event.target 对被触发的子元素进行操作

    document.getElementsByTag('ul')[0].addEventListener('event', (e) => {
    	// 利用 e.target 对冒泡上来的元素做区分
    	// e.target.nodeName, e.target.id 等
    })
    
  • 参考文章:实例分析JavaScript中的事件委托和事件绑定

原文地址:https://www.cnblogs.com/EricZLin/p/13605084.html