<!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. a标签打电话

    <a href="tel:0147-88469258"></a> <a href="mailto:bd@pangxiekeji.com&qu ...

  2. 汕头市队赛 SRM 08 A

    比赛没参加 所以回来补题咯 A还是自己YY出来了的 可惜比赛没有打 描述 给一个 01 串设为其 S,询问是否存在只出现两次的 01 串 T. 这里的出现定义为存在一串下标 ,满足  且 . 输入格式 ...

  3. java集合类深入分析之PriorityQueue（二）

    PriorityQueue介绍 在平时的编程工作中似乎很少碰到PriorityQueue(优先队列) ,故很多人一开始看到优先队列的时候还会有点迷惑.优先队列本质上就是一个最小堆.前面一篇文章介绍了堆 ...

  4. SQL联合查询（内联、左联、右联、全联）语法

    SQL联合查询(内联.左联.右联.全联)语法 概述: 联合查询效率较高,举例子来说明联合查询:内联inner join .左联left outer join .右联right outer join  ...

  5. 玩具谜题（NOIP2016）(纯模拟)

    原题传送门 神奇的题目.. 朝左朝右异或一下就好了 细节处理一下,输出now的字符串 下面贴代码 #include<iostream> #include<cstdio> #in ...

  6. CString和string在unicode与非unicode下的相互转换（转）

    原文转自 http://blog.csdn.net/u014303844/article/details/51397556 CString和string在unicode与非unicode下的相互转换 ...

  7. Jquery Dom节点常用操作

    select 标签 form提交的时候 提交select标签选中的value值 1. 添加项 $("#select_id").append("<option val ...

  8. Android视频压缩并且上传

    一,做视频上传首先第一步要从相册里选取视频,这一步.我的上篇博客中已经讲过了. protected void onActivityResult(int requestCode, int resultC ...

  9. vs2015 建立项目报错：值不能为空，参数名：path1的错误解决与“未将对象引用到对象的实例”

    “值不能为空,参数名:path1” 的错误.原因就是安卓sdk的路径不正确. 最简单的解决办法如下: 找到C:\Program Files (x86)\Android\android-sdk.进入文件 ...

  10. 原来是adblock惹的祸

    一个在本地开发好的网站,放到服务器就不行了.花了好几个小时的时间,最后试着把adblock关了,然后正常了.