<!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. matlab fft demo

    clf; fs=32;N=1024;   %采样频率和数据点数 n=0:N-1; t=n/fs;   %时间序列 x=1*sin(t); %信号 y=fft(x,N);    %对信号进行快速Four ...

  2. cygwin设置

    解决乱码问题 # 设置为中文环境,使提示成为中文  export LANG =" zh_CN.UTF-8 " # 输出为中文编码  export OUTPUT_CHARSET =& ...

  3. VS2013 MFC C++ CString ,const char , char, string 类型转换

    VS2013 测试 以下测试加入头文件: # include <string>#include <cstdlib>using namespace std; //-------- ...

  4. Altium Designer 总线式布线

    1.常规布线:不详细说了,是个人就知道怎么弄.需要说明的是在布线过程中,可按小键盘的*键或大键盘的数字2键添加一个过孔:按L键可以切换布线层:按数字3可设定最小线宽.典型线宽.最大线宽的值进行切换. ...

  5. 华为上机测试题（求亮灯数量-java）

    PS:自己写的,自测试OK,供大家参考. /* 一条长廊里依次装有n(1 ≤ n ≤ 65535)盏电灯,从头到尾编号1.2.3.…n-1.n.每盏电灯由一个拉线开关控制.开始,电灯全部关着.有n个学 ...

  6. PHP 时间获取本周 本月 本季度用法

    <?php        $week_begin = mktime(0, 0, 0,date("m"),date("d")-date("w&qu ...

  7. Vim文字编辑

    首先说明发现的vim编辑器的一个特点:vim编辑只有按[ENTER]键或命令模式下[o]才会换行,否则虽然在vim编辑器里显示的内容换行了,但事实上没有换行.如果你发现自己测试的效果和下面描述的不符, ...

  8. flume 使用

    基本操作: 编写配置文件: # 指定Agent的组件名称 a1.sources = r1 a1.sinks = k1 a1.channels = c1 # 指定Flume source(要监听的路径) ...

  9. Javascript"怪异"现象

    下面给大家看个例子,这个毫无疑问打印出10 var a = 10; function test() { console.log(a); } test(); 下面我改动一下 var a = 10; fu ...

  10. J.U.C并发框架源码阅读（十）ConcurrentLinkedQueue

    基于版本jdk1.7.0_80 java.util.concurrent.ConcurrentLinkedQueue 代码如下 /* * ORACLE PROPRIETARY/CONFIDENTIAL ...