js改变style样式和css样式
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样式相关推荐
- js样式会覆盖html样式,js实现html节点、CSS样式、事件的动态添加以及html覆盖层的添加...
(一)js实现html节点.CSS样式.事件的动态添加 ①场景描述:我们需要动态获取后台数据并将这些数据以列表方式展示,其中列表存在自己的列表样式,每个item都存在自己的点击事件.....那么在这种 ...
- javascript中动态加载js、vbs脚本或者css样式表
目录:DynamicLoad类简介.属性.方法.事件.示例.下载. DynamicLoad类简介 本文将为您介绍一个在javascript中可以动态加载js.vbs脚本和css样式表的DynamicL ...
- html的css样式大全,css样式有哪些?
css样式有3种,分为:内联式css样式.嵌入式css样式.外部式css样式.下面本篇文章就来给大家介绍一下css样式,希望对大家有所帮助. 对CSS三种样式定义及其实例: 内联式css样式 内联式c ...
- 改变 input[type=range] css样式
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- php控制 css样式,div css样式控制案例
摘要:html> div -css样式控制案例 #box{width:100px; height: 100px; html> div -css样式控制案例 #box{width:100px ...
- bootstrap的td可以增加title样式_3.CSS样式的三种使用方式
1.内链样式表 内联样式,又有人称行内样式.行间样式.内嵌样式.是通过标签的style属性来设置元素的样式,其基本语法格式如下: Title 码海无际 2.嵌入式样式表 内嵌式是将CSS代码集中写在H ...
- html 样式优先级,CSS样式优先级
##### 一.CSS样式选择器优先级 ID选择器(形如#divMain{}) > 类(形如.divSpecial{}) > 标签(形如body{}) ##### 二.CSS文件的优先级 ...
- 美丽的表格样式(使用CSS样式表控制表格样式)
按照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要全然放弃使用表格,表格在数据展现方面还是不错的选择. 如今使用介绍使用CSS样式表来控制.美化表格的 ...
- 漂亮的表格样式(使用CSS样式表控制表格样式)
依照WEB2.0风格,设计了几个表格样式,希望大家喜欢. WEB2.0提倡使用div开布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择. 现在使用介绍使用CSS样式表来控制.美化表格的 ...
最新文章
- melogin宽带连接服务器无响应,输入melogin.cn进不了路由器设置界面怎么办
- Dubbo原理何源码解析之服务暴露
- 2020年SWPUACM团队新生第四次周赛(题解)
- Star 10.9K!这份Google面试攻略,牛逼了!
- pip ImportError: cannot import name 'main' after update
- BuddyPress安装指南
- jmeter的master-slave模式
- wine手动安装wine-mono和wine-gecko组件
- AIX环境安装DB2 数据库
- 用什么c语言语句直接跳出if,C语言中怎样跳出if语句
- openwrt之修改Luci界面
- 优质办公体验,掌上OA一机hold住全场
- mysql+纵表和横表_mysql 横表和纵表转换
- 基于百度飞桨的单/多镜头行人追踪(非官方Baseline)
- 使用ArcGIS制作专题等值线图
- 线速度与角速度的关系
- 云和恩墨亮相CNCC 2020,zCloud打造国产时代数据库管理中台
- 微信公众平台如何更换安全管理员(微信一)
- 苹果二手机价格行情2022.2.22
- 活灵活现用Git--基础篇
热门文章
- 【C 语言】数组 ( 指针数组用法 | 自我结束能力 )
- 【数字信号处理】数字信号处理简介 ( 抽样定理 | 多抽样率 )
- 【RecyclerView】 十三、RecyclerView 数据更新 ( 移动数据 | 数据改变 )
- 【Android 应用开发】Activity生命周期 与 Activity 之间的通信
- 树莓派设置音频输出音量
- [JVM 相关] Java 新型垃圾回收器(Garbage First,G1)
- LightTools 切趾角度设置
- 感知机模型及其对偶形式
- win7 无法复制粘贴
- .NET 框架与多线程 (转载)