<!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. 让DIV的滚动条自动滚动到最底部 - 3种方法

    要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...

  2. bzoj4059 [Cerc2012]Non-boring sequences

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4059 [题解] 考虑分治.定义过程solve(l,r)为判断全在[l,r]范围内的所有连续子 ...

  3. Hibernate 中 get()和load()的区别

    一.1.程序检索数据库中不存在的OID:     load方式检索不到的话会抛出org.hibernate.ObjectNotFoundException异常     get方法检索不到的话会返回nu ...

  4. CString::GetLength()获得字节数

    按照MSDN的说吗,在选用MBCS多字节字符串编码时,该方法会得到正确的字节数.此时没有问题. For multibyte character sets (MBCS), GetLength count ...

  5. c++ 实现 http 上传和下载

    代码下载地址:   http://download.csdn.net/detail/mtour/8243527 最近写了个程序需要用到http通讯,由于flash空间比较小,没有考虑 libcurl库 ...

  6. C 实现删除非空文件夹

    /* 文件名:   rd.c ---------------------------------------------------- c中提供的对文件夹操作的函数,只能对空文件夹进行 删除,这使很多 ...

  7. c#操作SQL的例子

    >> 数据表复制 当表目标表存在时: insert into 目的数据库..表 select * from 源数据库..表 当目标表不存在时: select * into 目的数据库..表 ...

  8. python 操作数据库1--连接、执行sql语句

    #!/usr/bin/env python # -*- coding:utf-8 -*- # @Time : 2017/11/20 16:03 # @Author : lijunjiang # @Fi ...

  9. JAVA版拆分大整数为2幂的和算法

    import java.util.ArrayList; import java.util.List; public class StrTest { public static void main(St ...

  10. 推荐一本迷你中文书《JavaScript Promise迷你书（中文版）》

    https://github.com/azu/promises-book http://it-ebooks24.com/ebook/mastering-javascript-promises 传值,调 ...