<!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. 【转】shell脚本写的俄罗斯方块游戏

    亲测一个很好玩的shell脚本写的俄罗斯方块游戏,脚本来自互联网 先来讲一下思维流程 一.方块的表示 由于shell不能定义二维数组,所以只能用一维数组表示方块,俄罗斯方块主要可以分为7类,每一类方块 ...

  2. mysql索引记

    如果字段是数值型,where 是字符串型,走索引但是,如果字段是字符串型,但是where 是数值型,不走索引

  3. [LeetCode] Evaluate Reverse Polish Notation stack 栈

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  4. 转圈游戏（NOIP2013）

    原题传送门 好吧,这道题很水,, 首先我们一看,这就是一道快速幂的题目,k那么大... 然后第X个人的答案就是(x+m*10^k)%n啦!! 好吧,这道题没有什么注意事项 太水了 #include&l ...

  5. 在eclipse中使用vim

    转自:http://blog.csdn.net/eplaylity/article/details/6168283 1. vrapper(开源) 直接从eclipse安装即可,地址:http://vr ...

  6. Java设计模式_创建型模式_单例模式

    单例模式的实现: 定义一个类,在类中定义该类的静态变量,再定一个一个获取该类的静态变量的方法. UML图:

  7. 7.0不通过FileProvider解决调用相机给uri问题异常

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {//严格模式 StrictMode.VmPolicy.Builder builder = ...

  8. Less的用法

    Less常用来写样式,比较多的用法是使用第三方软件编译成CSS文件,然后在HTML页面引入CSS文件.而不是直接在HTML页面里引入编译文件和Less文件.如此以来,在后期修改方便的多.当然,在写小项 ...

  9. windows 中使用hbase 异常：java.io.IOException: Could not locate executable null\bin\winutils.exe in the Hadoop binaries.

    平时一般是在windows环境下进行开发,在windows 环境下操作hbase可能会出现异常(java.io.IOException: Could not locate executable nul ...

  10. TCP/IP、Http、Socket 简单理解

    转自:http://blog.csdn.net/guyan0319 https://blog.csdn.net/guyan0319/article/details/79404216 一. 什么是TCP ...