通过js 点击按钮去改变目标原始的背景颜色

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>Change.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  <script language="javascript">

     function test4(event) {

	   if(event.value == "11") {

	      //?取div1

	      var div1 = document.getElementById('div1');

	      div1.style.backgroundColor="black";

	   }

	   if(event.value == "22") {

	      //?取div1

	      var div1 = document.getElementById('div1');

	      div1.style.backgroundColor="red";

	   }

	 }

  </script>

</head>

<body>

  <div id="div1" style="width:400px; height:300px; background-color:red;">div1</div>

  <input type="button" value="11" onclick="test4(this)"/>

  <input type="button" value="22" onclick="test4(this)"/>

  </body>

</html>

Js 通过点击改变css样式的更多相关文章

  1. js改变css样式

      CreateTime--2017年10月31日15:14:12 Author:Marydon js改变css样式 1.js改变单个css样式 HTML部分 <div id="tes ...

  2. jQuery中添加/改变/移除改变CSS样式例子

    在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧.     CSS()方法改变CSS样式 ...

  3. 8 HTML DOM 元素的查找与改变&改变CSS样式&HTML事件

    HTML DOM(Document Object Model)文档对象模型 当网页被加载时,浏览器会创建页面的文档对象模型. HTMLDOM 定义了用于HTML的一系列标准的对象.通过DOM,你可以访 ...

  4. jQuery基础 - 改变CSS样式

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...

  5. 改变CSS样式

    改变CSS样式 1.改变HTML元素样式的语法 //改变HTML样式的语法 document.getElementById(id).style.property = new style 例子: < ...

  6. JQuery - 改变css样式

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...

  7. jQuery CSS()方法改变CSS样式实例解析

    转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一 ...

  8. javascript之DOM编程改变CSS样式（简易验证码显示）

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

  9. 巧用hover改变css样式和背景

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 【面试】惠普IT电面

    1.英文自我介绍 一定要事先准备,逻辑要清晰 2.英文项目介绍

  2. delphi XML 原来可以玩接口

    以下代码旨在 脱离TXMLDocument 操作 xml unit Unit3; interface uses Windows, Messages, SysUtils, Variants, Class ...

  3. Linux Shell编程（3）——运行shell脚本

    写完一个脚本,你能够运行它用命令:sh scriptname, [5] 另外也也可以用bash scriptname. 来执行(不推荐使用:sh <scriptname, 因为这样会禁止脚本从标 ...

  4. 【转】ConcurrentModificationException异常解决办法 --不错

    原文网址:http://blog.sina.com.cn/s/blog_465bcfba01000ds7.html 1月30日java.util.ConcurrentModificationExcep ...

  5. 【树状数组】CSU 1811 Tree Intersection (2016湖南省第十二届大学生计算机程序设计竞赛)

    题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1811 题目大意: 一棵树,N(2<=N<=105)个节点,每个节点有一种颜 ...

  6. 开源的asp.net工作流程引擎。 http://ccflow.org

    开源的asp.net工作流程引擎. http://ccflow.org

  7. Elasticsarch及插件安装

    Elasticsarch及插件安装 一.环境介绍与安装准备 1.环境说明 OS为Centos 6.5,elasticsearch-1.1.X.tar.gz,         注:mongo river ...

  8. C数组的相关知识

    数组的定义:具有相同数据类型的集合.在内存中开辟连续的存贮空间,从上往下,依次存储 补充:内存是以字节位单位的存储空间,内存中的每一个字节都唯一对应一个编号.这个编号就是地址.只要是存在内存中的数据都 ...

  9. 数据结构——UVA 1600 机器人巡逻

    描述 A robot has to patrol around a rectangular area which is in a form of mxn grid (m rows and n colu ...

  10. 双有序队列算法——处理哈夫曼K叉树的高效算法

    算法介绍: 哈夫曼树的思路及实现众所周知,大部分是用堆来维护和实现,这种思路比较清晰,在K比较小的时候处理较快(具体例子接下来再说),而且编程复杂度不是很高,利于应用.但是,其所用的数据结构是树,是在 ...