Loading

每日思考（2020/09/02）

题目概览

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

题目解答

Doctype文档类型

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

  • HTML5的DOCTYPE只有一种

    <!DOCTYPE html>

  • HTML4.01的DOCTYPE有三种：Strict，Transitional和Frameset；

    <!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中的事件委托和事件绑定

posted @ 2020-09-02 23:22  澎湃_L  阅读(92)  评论(0)    收藏  举报