首页
Python
Java
IOS
Andorid
NodeJS
JavaScript
HTML5
【
JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变
】的更多相关文章
JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变
思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div样式改变. <style> body{color:#fff;font:12px/1.5 Tahoma;} #div1{ width:150px; height:150px; margin:0 auto; padding:10px; background:black; border:10px sol…
CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分
问题总结: 1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left; 2. 隐藏的div这里不需要专门设置宽高.居中,是靠内容和padding撑起来的尺寸.外层div居中,内层跟着居中. <style> *{margin:0;padding:0;} // 后来添加的 body{ font-size: 12px; } #outer{ margin: 10px auto; width: 180px; } /* #login input, #…
JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符
练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1. && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句. 相当于if(oInput[i].checked) {n++;} oInput[i].checked && n++ 2. n == oInput.length - 1; 这句话先判断 n是不是等于oInput.length - 1 (即checkbox全都选中了)? 返回值 true/…
JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载
<style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin: 10px auto; border: 1px solid white; border-radius: 6px; background-color: white; width: 200px; padding: 8px 6px 6px 8px; } .outer>ul{ overflow: hidden…
JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式
练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = document.getElementById('div1'); // var oInput1 = document.getElementsByTagName('input')[0].value; // var oInput2 = document.getElementsByTagName('input')[1…
JS学习笔记 - fgm练习 - 输入数字求和 正则replace onkeyup事件
<style> body{font-size: 12px;} .outer{ width: 500px; margin: 0 auto; } span{ color: #999; } input{ width: 220px; line-height: 20px; border: 1px solid #ccc; margin-bottom: 12px; } p{ font-size: 20px; color: red; font-weight: bold; } </style> &l…
JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max
<script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0; // alert(oP.innerHTML = ++i + 2) 从这里弹窗初始的typeof innerHTML 和 ++i 运算之后的就很清楚. setInterval(updateNum, 1000); updateNum(); // 复习一下定时器怎么调用的!! function updateNu…
JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i
<script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var oSum = document.getElementsByTagName('span')[0]; var oBtn = document.getElementsByTagName('button')[0]; for (i = 0; i < aInp.length; i++) { aInp[i].onkeyu…
JS学习笔记 - fgm练习 - 输入法下拉框 三元表达式
<script> window.onload = function() { var oBtn = document.getElementsByTagName('input')[0]; var oUl = document.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); oBtn.onclick = function() { // oUl.style.display = 'block'; // 这里…
JS学习笔记 - fgm练习 - 网页换肤
总结: 1. 点击按钮,div内部变色,边框保持颜色不变. 实现原理:其实本来就把background 和 border 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只需要更改background 的颜色. border 部分不需要设置. 2. for in 循环,遍历数组的用法: for(var p in oSkin) oSkin[p].className = ""; 等价于下面的代码: for(var i=0; i<aDiv.length;…