innerHTML、outerHTML 和 innerText 、outerText的区别
前端网站 JS&CSS
innerHTML vs outerHTMLinnerHTML 属性设置或返回所有后代的html。outerHTML 属性设置或返回对象本身及其所有后代的html。示例 html 代码<div> hello <b>world</b> </div>获取值设置 outerHTML 设置 innerHTML 设置 XXXhtml 可以插入标签innerText vs outerTextinnerText 和 out... ...
阅读全文
css 覆盖元素 style 里面值
JS&CSS
譬如覆盖下面的 top<ul class="user-dropdown" style="top:65px">可以使用.user-dropdown{
top: 40px !important;
}!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。... ...
阅读全文
css 实现输入框错误 晃动效果
前端网站 JS&CSS
网上去找个晃动的样式 放到我们 login的 css 文件 style.scss 中:.shake {
animation: shake 800ms ease-in-out;
}
@keyframes shake {
10%, 90% { transform: translate3d(-1px, 0, 0); }
... ...
阅读全文
CSS 之 position 相对定位元素 absolute ，relative，fix 等
前端网站 JS&CSS
position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位：绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它的正常默认位置进行偏移。static 为 默认值1. relative 演示relative 是相对于 正常位置的 偏移。它并不影响附近的元素。<html>
<head>
<style type="text/css">
* {
padding... ...
阅读全文
input 输入框 在自动填充时 背景颜色问题
前端网站 JS&CSS
Chrome 浏览器下 form 表单，点击 input 输入框选择输入记录自动填充时，输入框背景颜色会改变，这是 chrome 浏览器内置的表单自动填充背景颜色功能。解决方法input:-internal-autofill-previewed,
input:-internal-autofill-selected {
// 自动填充时的字体颜色
-webkit-text-fill-color: #fff;
// ... ...
阅读全文
css 的 box-sizing 布局 如何计算一个元素的总宽度和总高度
JS&CSS 概念原理
CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。在 CSS 盒子模型的默认定义里，设置一个元素所设置的 width 与 height 只会应用到这个元素的内容区（content-box）。如果再设置这个元素的 border 边框 或 padding 内边距 ，那么这个盒子的实际宽度和高度为： width + border + padding。这样就可能会超出 父盒子1. box-sizing 的设置box-sizing 属性可以被用来调整这些表现:content-box 是 默认值如果你设置一个元素的宽为 100px，那么... ...
阅读全文
什么是闭包？ 何时用闭包
JS&CSS 概念原理
通俗的讲，闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。下面我们使用一个计数器实例说明 闭包的使用场景。以下用 js 代码演示1. 使用全局变量；有安全隐患// 初始化计数器
var counter = 0;
// 递增计数器的函数
function add() {
counter += 1;
}
// 调用三次 add()
add();
add();
add(); // 此时计数器应该是 3任何代码都可以... ...
阅读全文
JavaScript 严格模式 Strict_mode 与 非严格模式 的区别
前端网站 JS&CSS 概念原理
对于 JavaScript 严格模式与非严格模式的区别，强烈建议大家去查看权威文档 MDN: 严格模式。首先，严格模式通过抛出错误来消除一些原有的静默错误。其次，严格模式修复了一些导致JavaScript引擎难以执行优化的缺陷：有时候，相同的代码，严格模式可以比非严格模式下运行的更快。第三，严格模式禁用了在ECMAScript的未来版本中可能会定义的一些语法。1、使用严格模式函数中使用funtion () {
'use strict'; //或者是"use strict";... ...
阅读全文
jquery 点击复制 文本
前端网站 JS&CSS
html 按钮<button class="btn btn-info btn-xs copyit" code="{{ 变量 }}" >复制</button>
<input id="hide-code" type="text" style='opacity: 0;position: absolute;'>jque... ...
阅读全文
jquery.sticky-sidebar.js 一款高性能的 js 固定侧边栏插件
前端网站 JS&CSS
sticky-sidebar 插件 github 地址： https://github.com/abouolia/sticky-sidebar【例子1】 【 例子2】它的特性滚动时，它不会重新计算所有尺寸，而只是重新计算必要的尺寸超级平滑，不会产生滚动滞后或颠簸现象，也不会重排页面。与调整大小传感器集成，以在更改侧边栏或其容器的大小时重新计算插件的所有尺寸。它在每种词缀类型上都有事件触发器，以在特定情况下挂接您的代码。与容器的其余部分相比，如果侧边栏过高或过短，请使用侧栏。零依赖和超级简单的设置。下载引用直接引用下图其... ...
阅读全文
