通过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. iOS开发工程师笔试题

    iOS开发工程师笔试题 1.   Object-c的类可以多重继承么?可以实现多个接口么?Category是什么?重写一个类的方式用继承好还是分类好?为什么? Object-c的类不可以多重继承:可以 ...

  2. InfiniBand技术简介

    InfiniBand技术简介   转载请在文首保留原文出处:EMC中文支持论坛https://community.emc.com/go/chinese 介绍         随着CPU和通讯处理速度的 ...

  3. python学习的一些感悟

    首先声明,这里用到的库是在coursera上学习时,老师建立的一个库 #timer import simplegui import random # global state message = &q ...

  4. 以Facebook为案例剖析科技公司应有的工具文化

    http://www.36kr.com/p/146507.html 编者按:本文由 @王淮Harry哥 撰写,摘自他即将出版的新书.王淮是 Facebook 早期员工,中国藉第二位工程师第一位研发经理 ...

  5. 从VC到g++遇到的事

    最近做的项目,需要把代码从VC移植到g++下编译,在这个过程中,遇到了几个平台相关的问题--在VC下顺利编译的代码,但在g++中编译报错. 这里贴出来给大家分享一下: 1. 枚举类型 问题代码 enu ...

  6. 解决VS2010中产生的ipch文件夹和sdf文件

    纯粹参考他人博文,转载时注明参考链接!!! 参考链接: http://blog.sina.com.cn/s/blog_707a4cbf0100r5jq.html 在VS2010开发的项目中,ipch文 ...

  7. a trick in reading and storing file in the exact way!

    read and write file is a very common operation regarding file mainuplation. However, the powerfull g ...

  8. BZOJ 1050 [HAOI2006]旅行comf

    1050: [HAOI2006]旅行comf Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1889  Solved: 976[Submit][Sta ...

  9. 数据结构：（平衡树，链表）BZOJ 1588[HNOI2002]营业额统计

    1588: [HNOI2002]营业额统计 Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 12173  Solved: 4354[Submit][Sta ...

  10. Matlab计算机视觉/图像处理工具箱推荐

    Matlab计算机视觉/图像处理工具箱推荐 转载http://cvnote.info/matlab-cv-ip-toolbox/ 计算机视觉/图像处理研究中经常要用到Matlab,虽然其自带了图像处理 ...