js改变style样式和css样式的简单实例


Posted in Javascript onJune 28, 2016

js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下:

<!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 == "黑色") {
	   //获取div1
	   var div1 = document.getElementById('div1');
	   div1.style.backgroundColor="black";
	  }
	  if(event.value == "红色") {
	   //获取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="黑色" onclick="test4(this)"/>
 <input type="button" value="红色" onclick="test4(this)"/>

 </body>
</html>

test4(this)代表当前的<input相当于把它看成一个对象。

再来看一下改变css样式,代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>Change1.html</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  
  <link rel="stylesheet" type="text/css" href="css/Change.css">
 <script language="javascript">
   function test4(event) {
	 //获取样式表中所有class选择器都获得
	 var ocssRules = document.styleSheets[0].rules;
	 //从ocssRules中取出你希望的class
	 var style1 = ocssRules[0];
	 if(event.value == "黑色") {
	   //window.alert(style1.style.backgroundColor);
	   style1.style.backgroundColor="black";
	 }else if(event.value == "红色") {
	   style1.style.backgroundColor="red";
	 }
	 
	 }
  </script>
</head>
<body>
 <div id="div1" class="style1">div1</div>
 <input type="button" value="黑色" onclick="test4(this)"/>
 <input type="button" value="红色" onclick="test4(this)"/>

 </body>
</html>

以上就是小编为大家带来的js改变style样式和css样式的简单实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
Javascript中this的用法详解
Sep 22 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
JS实现滑动插件
Jan 15 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 Javascript
js改变css样式的三种方法推荐
Jun 28 #Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 #Javascript
获取input标签的所有属性的方法
Jun 28 #Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 #Javascript
javascript 常用验证函数总结
Jun 28 #Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 #Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 #Javascript
You might like
基于empty函数的输出详解
2013/06/17 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
Python pandas常用函数详解
2018/02/07 Python
python 拼接文件路径的方法
2018/10/23 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
python中的global关键字的使用方法
2019/08/20 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
Python: glob匹配文件的操作
2020/12/11 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
揠苗助长教学反思
2014/02/04 职场文书
导购员的岗位职责
2014/02/08 职场文书
2014年教务处工作总结
2014/12/03 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
爱的教育观后感
2015/06/17 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
MySQL8.0.18配置多主一从
2021/06/21 MySQL