<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>函数传参，改变Div任意属性的值</title>

<style>

body,p{margin:0;padding:0;}

body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;}

#outer{width:300px;margin:0 auto;}

p{margin-bottom:10px;}

button{margin-right:5px;}

label{width:5em;display:inline-block;text-align:right;}

input{padding:3px;font-family:inherit;border:1px solid #ccc;}

#div1{color:#fff;width:180px;height:180px;background:#000;margin:0 auto;padding:10px;}

</style>

<script>

var changeStyle = function (elem, name, value) {

    elem.style[name] = value

}

window.onload = function ()

{

    var oDiv = document.getElementById("div1");

    var oBtn = document.getElementsByTagName("button");

    var oInput = document.getElementsByTagName("input");

    oBtn[0].onclick = function ()

    {

        changeStyle(oDiv, oInput[0].value, oInput[1].value)

    },

    oBtn[1].onclick = function ()

    {

        oDiv.removeAttribute("style")

    }

}

</script>

</head>

<body>

<div id="outer">

    <p><label>属性名：</label><input type="text" value="background" /></p>

    <p><label>属性值：</label><input type="text" value="blue" /></p>

    <p><label></label><button>确定</button><button>重置</button></p>

</div>

<div id="div1">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>

</body>

</html>

图片列表：鼠标移入/移出改变图片透明度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片列表：鼠标移入/移出改变图片透明度</title>

<style>

ul,li{margin:0;padding:0;list-style-type:none;}

#imgList{width:700px;overflow:hidden;zoom:1;border:1px solid #333;margin:0 auto;padding:0 0 10px 10px;}

#imgList li{float:left;width:128px;height:128px;border:1px solid #ccc;margin:10px 10px 0 0;}

#imgList li img{float:left;opacity:0.3;cursor:crosshair;filter:alpha(opacity=30);}

#imgList li.current img{opacity:1;filter:alpha(opacity=100);}

</style>

<script>

window.onload = function ()

{

    var oLi = document.getElementsByTagName("li");

    for (var i = 0; i < oLi.length; i++)

    {

        oLi[i].onmouseover = function ()

        {

            this.className = "current"

        };

        oLi[i].onmouseout = function ()

        {

            this.className = ""

        }

    }

}

</script>

</head>

<body>

<ul id="imgList">

    <li><img src="img/1.jpg" /></li>

    <li><img src="img/2.jpg" /></li>

    <li><img src="img/3.jpg" /></li>

    <li><img src="img/4.jpg" /></li>

    <li><img src="img/5.jpg" /></li>

    <li><img src="img/6.jpg" /></li>

    <li><img src="img/7.jpg" /></li>

    <li><img src="img/8.jpg" /></li>

    <li><img src="img/9.jpg" /></li>

    <li><img src="img/10.jpg" /></li>

</ul>

</body>

</html>

函数传参，改变Div任意属性的值&&图片列表：鼠标移入/移出改变图片透明度的更多相关文章

  1. 【JS学习笔记】函数传参

    比如仅仅改变背景的颜色 函数传参:参数就是占位符. 那么在什么时候用传参呢?函数里定不下来的东西. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  2. c# 内存的具体表现- 通用类型系统 深拷贝 浅拷贝 函数传参

    c# 通用类型系统 及变量在 深拷贝 浅拷贝 函数传参 中的深层次的表现 在编程中遇到了一些想不到的异常,跟踪发现,自己对于c#变量在内存上的表现理解有偏差,系统的学习并通过代码实验梳理了各种情况下, ...

  3. x64汇编第三讲,64位调用约定与函数传参.

    目录 x64汇编第三讲,64位调用约定与函数传参. 一丶复习X86传参 二丶x64汇编 2.1汇编详解 x64汇编第三讲,64位调用约定与函数传参. 一丶复习X86传参 在x86下我们汇编的传参如下: ...

  4. python 四种方法修改类变量，实例对象调用类方法改变类属性的值，类对象调用类方法改变类属性的值，调用实例方法改变类属性的值，直接修改类属性的值

    三种方法修改类变量,实例对象调用类方法改变类属性的值,类对象调用类方法改变类属性的值,调用实例方法改变类属性的值,类名就是类对象,city就是类变量, #coding=utf-8 class empl ...

  5. JS添加、设置属性以及鼠标移入移出事件

    源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  6. div展现与收起效果（鼠标移入移出）

    效果图: 移入: 移出: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. JS中的函数传参

    前言: 函数分为有参有返回值,有参无返回值,无参无返回值,无参有返回值:那么对于无参数的函数你想使用函数的调用怎么办呢?如果你想封装一个代码,实现多种功能,但是形参大于实参或者实参大于形参又该如何?本 ...

  8. 【又长见识了】函数传参，params参数，ref和out参数详解

    一.原来函数这样传参 先看一个函数和函数调用. static void Main(string[] args) { ; Test(num);//局部变量在使用之前赋值 //Test(10); //直接 ...

  9. C++中的二级指针和指针引用函数传参

    在函数的使用过程中,我们都明白传值和传引用会使实参的值发生改变.那么能够通过传指针改变指针所指向的地址吗? 在解决这个问题之前,也许我们应该先了解指针非常容易混淆的三个属性: ①.指针变量地址(&am ...

随机推荐

  1. WPF中的URI

    在 Windows Presentation Foundation (WPF) 中,使用统一资源标识符 (URI) 标识和加载文件的方式有很多,包括: 指定当应用程序第一次启动时显示的用户界面 (UI ...

  2. lambda calculus

    ;;;lambda calculus ;;;booleanstrue = \x.\y.xfalse = \x.\y.yif = \v.\t.\f. v t f ;;;exif true M N = M ...

  3. git 本地与远程关联流程

    git init git add -A git commit -m '提交' git remote add origin git@github.com:laniu/liuna.git git push ...

  4. js-禁止微信H5页面点击右上角菜单时出现“复制链接”，且分享仅支持微信分享

    禁止微信H5页面点击右上角菜单时出现“复制链接”,这个问题已经影响到我很久很久了,起码有2年了, 昨天写H5活动的时候,需求有一个是:可分享,但是禁止复制活动链接, 这一下,就逼我务必好好研究研究了. ...

  5. （3）PHP环境搭建和使用

    一.php开发环境 php开发的环境组件一般需要 apache(iis)+mysql+php 可以自己搭建环境或者用别人把这几项集成好的软件,自己搭建的环境配置起来麻烦但可以选择任意版本,集成的软件安 ...

  6. Python与数据库[2] -> 关系对象映射/ORM[5] -> 利用 sqlalchemy 实现关系表查询功能

    利用 sqlalchemy 实现关系表查询功能 下面的例子将完成一个通过关系表进行查询的功能,示例中的数据表均在MySQL中建立,建立过程可以使用 SQL 命令或编写 Python 适配器完成. 示例 ...

  7. Python的程序结构[8] -> 装饰器/Decorator -> 装饰器浅析

    装饰器 / Decorator 目录 关于闭包 装饰器的本质 语法糖 装饰器传入参数 1 关于闭包 / About Closure 装饰器其本质是一个闭包函数,为此首先理解闭包的含义. 闭包(Clos ...

  8. 一个错误使用单例模式的场景及ThreadLocal简析

    近来参与一个Java的web办公系统,碰到一个bug,开始猜测是线程池管理的问题,最后发现是单例模式的问题. 即,当同时发起两个事务请求时,当一个事务完成后,另一个事务会抛出session is cl ...

  9. [CF526G]Spiders Evil Plan

    题目大意: 给出一个$n(n\leq 10^5)$个结点的带边权的树,$q(q\leq 10^5)$个询问,每次询问用$y$条路径覆盖整棵树且覆盖$x$至少一次,最多能覆盖的道路长度是多少? 强制在线 ...

  10. 设置iframe高度自适应屏幕高度

    写在前面: 最近在搭建项目前台页面框子的时候,把iframe设置成了固定的高度,导致不同的电脑尺寸访问的时候,高度差异较大,故查了下,将iframe设置成自动适应屏幕高度的方式,这里记录下. 还是直接 ...