javascript动态设置样式style实例分析


Posted in Javascript onMay 13, 2015

本文实例讲述了javascript动态设置样式style的方法。分享给大家供大家参考。具体分析如下:

动态修改style

1.易错:修改元素的样式不是设置class属性,而是className属性.
2.易错:单独修改样式的属性使用"style.属性名".注意在css中属性名在javascript中

操作的时候属性名可能不一样,主要集中在那些属性名中含有-的属性,因为

javascript中-是不能做属性,类名的。所以在CSS中背景色是background-clolor,而javascript中则是style.background;元素样式名是class,在javascript中是className属性;font-size->style.fontSize;margin-top->style.marginTop

3.单独修改控件的样式<input type="button" value="AAA" onclick="this.style.color='red'" />

1.举例1

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>动态修改style</title>
 <style type="text/css">
 .day
 {
 background-color:Green;
 }
 .night
 {
 background-color:Black;
 }
 </style>
 <script type="text/javascript">
 function dayclick() {
 var divMain = document.getElementById("divMain");
 //注意这里使用的是className而不是class
 divMain.className = "day";
 }
 function nightclick() {
 var divMain = document.getElementById("divMain");
 divMain.className = "night";
 }
 </script>
</head>
<body>
 <div id="divMain" class="day">
 <font color="red">中华人名共和国</font>
 </div>
 <input type="button" value="白天" onclick="dayclick()" />
 <input type="button" value="黑夜" onclick="nightclick()" />
</body>
</html>

2. 示例:动态修改style(模拟开灯,关灯)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <style type="text/css">
 .day
 {
 background-color:White;
 }
 .night
 {
 background-color:Black;
 }
 </style>
 <script type="text/javascript">
 function switchLight() {
 var btnSwitch = document.getElementById("btnSwitch");
 if (document.body.className == "day") {
 document.body.className = "night";
 btnSwitch.value = "开灯";
 }
 else {
 document.body.className = "day";
 btnSwitch.value = "关灯"; 
 }
 }
 </script>
</head>
<body class="night">
<input type="button" value="开灯" id="btnSwitch" onclick="switchLight()"/>
</body>
</html>

3. 示例:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>动态设置style练习(修改文本框背景色)</title>
 <script type="text/javascript">
 function IniEvents() {
 var inputs = document.getElementsByTagName("input");
 for (var i = 0; i < inputs.length; i++) {
 if (inputs[i].type == "text") {
  //设置txtOnBlur函数为input元素的onblur事件的响应函数
  inputs[i].onblur = txtOnBlur;
 }
 }
 }
 function txtOnBlur() {
 /*
 txtOnBlur是onblur的响应函数,而不是被响应函数调用
 的函数,所有可以用this来取的发生事件控件的对象
 */
 if (this.value.length <= 0) {
 this.style.background = "red";
 }
 else {
 this.style.background = "white";
 }
 }
 </script>
</head>
<body onload="IniEvents()">
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
node 文件上传接口的转发的实现
Sep 23 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
js实现详情页放大镜效果
Oct 28 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
javascript事件冒泡实例分析
May 13 #Javascript
javascript无刷新评论实现方法
May 13 #Javascript
javascript动态创建表格及添加数据实例详解
May 13 #Javascript
javascript动态创建链接的方法
May 13 #Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 #Javascript
javascript元素动态创建实现方法
May 13 #Javascript
javascript实现模拟时钟的方法
May 13 #Javascript
You might like
一个简单实现多条件查询的例子
2006/10/09 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
PHP链接MySQL的常用扩展函数
2014/10/23 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
php常用的工具开发整理
2019/09/26 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python OS模块常用函数说明
2015/05/23 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
基于python中theano库的线性回归
2018/08/31 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
UNIX文件类型
2013/08/29 面试题
2014年幼儿园保育工作总结
2014/12/02 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书