练习地址: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].value;
// 不应该在window.onload 获取变量时就获取 value, 这样后面输入框的值发生变化就获取不到!!!
var oInput1 = document.getElementsByTagName('input')[0];
var oInput2 = document.getElementsByTagName('input')[1]; var oBtn1 = document.getElementsByTagName('button')[0];
var oBtn2 = document.getElementsByTagName('button')[1]; oBtn1.onclick = function()
{
changeProperties(oDiv, oInput1.value, oInput2.value);
}; oBtn2.onclick = function()
{
oDiv.style.cssText = '';
// oDiv.removeAttribute("style") 另一种方法。
};
}; function changeProperties(obj, txt1, txt2)
{
obj.style[txt1] = txt2; // style后面必须用[]把变量框起来,不能直接用. 点号
}; // 这里用var之后,前面怎么调用? 参考:
// var myFn = function(a, b)
// {
// alert(a.value);
// alert(b.value)
// }; // oBtn.onclick = function()
// {
// myFn(oInput[0],oInput[1])
// }; </script>

JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式的更多相关文章

  1. 微信小程序开发:学习笔记[8]——页面跳转及传参

    微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...

  2. JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变

    思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...

  3. JS学习笔记 - fgm练习 - 多按钮控制同个div属性

    总结: 1. 注意body里的结构安排,全部装在大div,避免多次设置不同部分居中. 2. 一排按钮居中:装在大div里,text-align: center; 3. 把相同的部分封装成函数,即 同个 ...

  4. node.js学习笔记(二)——回调函数

    Node.js 异步编程的直接体现就是回调. 那什么是回调呢?回调指的是将一个函数作为参数传递给另一个函数,并且通常在第一个函数完成后被调用.需要指明的是,回调函数不是由该函数的实现方直接调用,而是在 ...

  5. JS学习笔记 - fgm练习 2-12- 全选反选 判断CheckBox是否选中 &&运算符

    练习地址:http://www.fgm.cc/learn/lesson2/12.html 总结: 1.  && 运算符,从左向右依次执行,如果遇到 false,就不再继续执行后面的语句 ...

  6. 【学习】js学习笔记:内置顶层函数eval()的兼容用法

    今天学了一个内置顶层函数,eval();其作用是将字符串转换成javascript命令执行,但必须符合语法,否则会报错. 如果写成window.eval(),则其定义的变量会在全局生效. 但是,在IE ...

  7. JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载

    <style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...

  8. JS学习笔记 - fgm练习 - 数字自增 定时器 数字比大小Math.max

    <script> window.onload = function(){ var oP = document.getElementsByTagName('p')[0]; var i = 0 ...

  9. JS学习笔记 - fgm练习 - 限制输入框的字符类型 正则 和 || 或运算符的运用 i++和++i

    <script> window.onload = function(){ var aInp = document.getElementsByTagName('input'); var oS ...

随机推荐

  1. SpringMVC框架的多表查询和增删查改

    必须声明本文章==>http://www.cnblogs.com/zhu520/p/7883268.html 一: 1):我的运行环境 我使用myeclipse(你也可以使用eclipse),t ...

  2. Java Web学习总结(10)——Session详解

    摘要:虽然session机制在web应用程序中被采用已经很长时间了,但是仍然有很多人不清楚session机制的本质,以至不能正确的应用这一技术.本文将详细讨论session的工作机制并且对在Java ...

  3. Ubuntu安装php

    http://jingyan.baidu.com/article/dca1fa6fadc61ff1a5405244.html

  4. Linux下经常使用的C/C++开源Socket库

    1.      Linux Socket Programming In C++ : http://tldp.org/LDP/LG/issue74/tougher.html 2.      ACE: h ...

  5. php输出杨辉三角

    php输出杨辉三角 一.截图 二.代码 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  6. 4. Brackets 前端编辑器试用

    转自:https://blog.csdn.net/wuji3390/article/details/71170579 Brackets编辑器介绍 "一个现代的,开源的,了解网页设计的编辑器& ...

  7. JSP_Learn

    // 解决中文乱码的问题String name = new String((request.getParameter("name")).getBytes("ISO-885 ...

  8. Axios再记录

    一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端(可实现ajax的请求) 有关学习网址:https://www.tuicool.com/articles/eMb2yuY    ...

  9. RecyclerView具体解释

    public class RecyclerView extends ViewGroup implements ScrollingView, NestedScrollingChild { 由上面的继承结 ...

  10. 前台技术--div的隐藏与显示

    怎样使用页面元素隐藏或显示. HTML为我们提供了两个变量visibility和display visibility:隐藏要元素可是元素所暂用的空间不予释放.也就是说元素隐藏了,可是页面上会流出一片空 ...