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 相关文章推荐
javascript 选择文件夹对话框(web)
Jul 07 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
精通JavaScript的this关键字
May 28 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
浅谈箭头函数写法在ReactJs中的使用
Aug 22 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
VUE 单页面使用 echart 窗口变化时的用法
Jul 30 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
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
vue-cli随机生成port源码的方法
2019/09/02 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
50行Python代码实现人脸检测功能
2018/01/23 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
Python3中的最大整数和最大浮点数实例
2019/07/09 Python
动态设置django的model field的默认值操作步骤
2020/03/30 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
abstract是什么意思
2012/02/12 面试题
社会工作专业求职信
2014/07/15 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
delete in子查询不走索引问题分析
2022/07/07 MySQL