Js 通过点击改变css样式

通过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>
时间: 2024-11-04 22:50:00

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

JS中改变CSS样式以及阻止冒泡总结

在JS中改变CSS样式,一般是通过鼠标或者键盘事件触发调用函数来实现CSS样式的改变,采用“className.style.stylename="";”来实现,例如 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM编程挑战</title> <link rel="stylesheet" type

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

在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧. CSS()方法改变CSS样式 css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码:  代码如下 复制代码 $("#61dh a").css('color','#123456');//选择器‘$("#61dh a")’表

js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加

(一)js实现html节点.CSS样式.事件的动态添加 ①场景描述:我们需要动态获取后台数据并将这些数据以列表方式展示,其中列表存在自己的列表样式,每个item都存在自己的点击事件.....那么在这种情况下我们是不是就需要用到动态添加节点的模式去处理呢? ②代码记录如下: $.ajax({ url : "***.action", type : 'post', dataType : 'json', contentType : "application/x-www-form-ur

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

HTML DOM(Document Object Model)文档对象模型 当网页被加载时,浏览器会创建页面的文档对象模型. HTMLDOM 定义了用于HTML的一系列标准的对象.通过DOM,你可以访问所有的HTML元素,连同它们所包含的文本和属性. HTMLDOM独立于平台和编程语言,可以Java.JavaScript之类的调用. HTMLDOM模型被构造为对象的树. JavaScript能够改变页面中所有的HTML元素.属性.CSS样式,能够对页面中所有的事件做出反应. HTML DOM树:

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

转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: $("#61dh a").css('color','#123456');//选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接.//.css(‘

jQuery基础 - 改变CSS样式

jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代码: $("#61dh a").css('color','#123456'); //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接. //.css(‘color’,'#123456');表示把颜色设为'#123456' 如果我们需要改变

jQuery CSS()方法改变CSS样式

jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: .代码   $("#61dh a").css('color','#123456'); //选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. //.css('color','#123456');表示把颜色设为'#123456' 如果需要

js函数arguments与获取css样式方法

函数传参,当参数的个数不定时,可以使用arguments arguments.length=实参个数 获得css样式方法: getComputedStyle()方法---->得到的是计算机计算后的样式(多次修改之后的最终样式),IE 6 7 8下兼容 style.属性   ----->操作的是元素内嵌样式,得到是内嵌样式的属性 currentStyle ----->标准浏览器不兼容 注意: 不能获取复合样式.例如 :backgroud:url() color .... 单一样式不要用来做

如何改变CSS样式

我用了一个博客样式,他的样式有点错位,摆弄了几个小时,终于找到了,怎么改变他.</br> 先进入设置,让后在CSS中输入: <style type="text/css">body{padding:0;} a.headermaintitle:visited, a.headermaintitle:active, a.headermaintitle:link{font-size:30px;color:red;}#leftcontent{position:absolut